我是React Native的新手。我正在尝试在我的App.js中嵌套多个导航。我已经成功地将StackNavigator嵌套在BottomTabNavigation中,没有任何问题。我通过将它们的初始路由组件设置为前一个导航器来链接这些导航器。我正在尝试添加一个DrawerNavigation,但一直收到错误提示。我的所有代码都在一个文件(App.js)中。我该如何解决这个问题?
堆栈导航器
const navigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
headerShown: false,
},
},
Favs: {
screen: CrossingScreen,
navigationOptions: {
title: 'News',
headerTitleStyle: {
color: 'white',
},
headerStyle: {
backgroundColor: 'red',
},
headerBackTitle: null,
headerTintColor: 'white',
},
},
},
{
initialRouteName: 'Home',
headerMode: 'screen',
})
底部选项卡导航
const TabNavigator = createMaterialBottomTabNavigator(
{
Home: {
screen: navigator,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'train'}
/>
</View>
),
},
},
FavScreen: {
screen: FavScreen,
navigationOptions: {
tabBarLabel: 'Favorites',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'star'}
/>
</View>
),
activeColor: '#f60c0d',
inactiveColor: '#f65a22',
barStyle: { backgroundColor: '#f69b31' },
},
},
MapScreen: {
screen: MapScreen,
navigationOptions: {
tabBarLabel: 'Map',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'map'}
/>
</View>
),
activeColor: '#615af6',
inactiveColor: '#46f6d7',
barStyle: { backgroundColor: '#67baf6' },
},
},
Cart: {
screen: CartScreen,
navigationOptions: {
tabBarLabel: 'Feedback',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'mail'}
/>
</View>
),
},
},
Cart2: {
screen: CartScreen,
navigationOptions: {
tabBarLabel: 'Add',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'add'}
/>
</View>
),
},
},
},
{
initialRouteName: 'Home',
activeColor: '#f0edf6',
inactiveColor: '#226557',
barStyle: { backgroundColor: '#3BAD87' },
})
抽屉导航器
const DrawerNav = createDrawerNavigator(
{
Page1: {
screen: TabNavigator,
},
Page2: {
screen: FavScreen,
},
Page3: {
screen: MapScreen,
},
},
{
contentComponent: SideMenu,
drawerWidth: 300,
})
将其导出到App.js中的应用程序容器中
export default createAppContainer(DrawerNav)
**错误:**