我正在尝试使用两个 Const increateAppContainer
但它不允许我这样做,所以我必须使用createBottomTabNavigator
and createStackNavigator
both in app.js
。这是我的代码
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator, createAppContainer , createBottomTabNavigator} from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AntIcon from "react-native-vector-icons/AntDesign";
import home from './src/Home/home';
import EmployerLayout from './src/Home/EmployerLayout';
import Employers from './src/CompleteEmployers/Employers';
import Jobs from './src/CompleteJobs/Jobs';
import Freelancers from './src/CompleteFreelancers/Freelancers';
import Profile from './src/ProfileSetting/Profile';
import DetailFreelancerScreen from './src/DetailFreelancer/DetailFreelancerScreen';
import DetailJobScreen from './src/DetailJobs/DetailJobScreen';
import DetailCompanyScreen from './src/DetailCompany/DetailCompanyScreen';
import SearchScreen from './src/DetailSearch/SearchScreen';
console.disableYellowBox = true;
const RootStack= createStackNavigator({
home:home,
Profile:Profile,
Employers:Employers,
Jobs:Jobs,
DetailFreelancerScreen:DetailFreelancerScreen,
DetailJobScreen:DetailJobScreen,
DetailCompanyScreen:DetailCompanyScreen,
SearchScreen:SearchScreen,
EmployerLayout:EmployerLayout,
})
const MainNavigator = createBottomTabNavigator({
// MainNavigator: MainDrawer},{
Home:{
screen: home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<AntIcon name="home" color={tintColor} size={25} />
)
}
},
Jobs:{
screen: Jobs,
navigationOptions:{
tabBarLabel:'Jobs',
tabBarIcon:({tintColor})=>(
<AntIcon name="appstore-o" color={tintColor} size={25} />
)
}
},
Freelancers:{
screen: Freelancers,
navigationOptions:{
tabBarLabel:'Freelancers',
tabBarIcon:({tintColor})=>(
<AntIcon name="user" color={tintColor} size={25}/>
)
}
},
Employers:{
screen: Employers,
navigationOptions:{
tabBarLabel:'Employers',
tabBarIcon:({tintColor})=>(
<AntIcon name="wallet" color={tintColor} size={25}/>
)
}
},
Profile:{
screen: Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<AntIcon name="setting" color={tintColor} size={25} />
)
}
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let IconComponent = CONST.IC_HOME;
if (routeName === CONST.MENU_HOME) {
IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
} else if (routeName === CONST.MENU_CALENDAR) {
IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
}
return IconComponent;
}
}),
tabBarOptions: {
activeTintColor: '#ff5851',
},
});
const App = createAppContainer(RootStack);
export default App;
在上面的代码中,我有两个 const RootStack
,MainNavigator
但我不能同时使用两者,有人可以帮我解决这个问题。