Реагируйте на навигацию, не переходя на правильный экран

Question

Я создал 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

Answer 1

Вы регистрируете один и тот же 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 }
});