我创建了3个堆栈导航器,分别为HomeStack
,PermissionsStack
和AppStack
。我将它们放在drawerNavigator
中,如下所示:
export const Drawer = DrawerNavigator({
Home: { screen: HomeStack, navigationOptions: {drawerLabel:() => null} },
Permissions: { screen: PermissionsStack, navigationOptions: {drawerLabel:() => null} },
Explore: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Explore'} },
ContactScreen: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Contact & Support'} },
TOU: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Terms of Use'} },
Privacy: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Privacy Policy'} },
Disclaimer: { screen: AppStack },
Settings: { screen: AppStack, navigationOptions: {drawerLabel:() => null} },
});
在Home
屏幕上,有一个指向TOU
的链接,但没有链接到TOU
,而是链接到Explore
。 onPress
上按钮的Home
为this.props.navigation.navigate('TOU')
。这不正确吗?
您可以自己运行此项目并在此处查看问题:https://gitlab.com/jefffabiny/navigation-issue
答案 0 :(得分:0)
您多次注册相同的StackNavigators
。
AppStack
的初始路由为Explore
。
我从没使用过DrawerNavigator
,但您应该像这样嵌套导航器:
export const Drawer = DrawerNavigator({
Home: { screen: HomeStack },
Permissions: { screen: PermissionsStack },
App: { screen: AppStack },
});
我不知道您到底想实现什么目的,但是如果您想从抽屉访问TOU
,而不仅是在Stack
内,您可以这样做:
const AppStack = createStackNavigator({
...
TOU: {
screen: TOU,
navigationOptions: ({ navigation }) => ({
title: 'Terms of Use',
})
},
...
});
export const Drawer = DrawerNavigator({
Home: { screen: HomeStack },
Permissions: { screen: PermissionsStack },
App: { screen: AppStack },
TOU: { screen: TOU }
});