How do i keep initial route with nested navigation with React Navigation v5?

╄→尐↘猪︶ㄣ 提交于 2021-02-05 12:20:33

问题


First let me state that I know how to navigate from one nested page to another using react navigation. However, whenever i navigate to a nested screen that is not the initial route, that screen now become the first screen whenever i navigate back to that nested stack.

Example.

  • Parent Navigator
    • Nested Stack Navigator 1
      • screen A (Initial Route)
      • screen B
    • Nested Stack Navigator 2
      • screen C (Initial Route)
      • screen D
    • Nested Stack Navigator 2
      • screen E (Initial Route)
      • screen F

Normally when navigating from one stack to Nested Stack Navigator 2 the I use the following.

navigation.navigate('Nested Navigator 2');

Which takes me to screen C, this is the expected behaviour. However, whenever i'm navigating from another stack to screen D, I notice that whenever i navigate back to Nested Stack Navigator 2 with the above code it no longer opens up screen C it opens up screen D instead.

This is how I navigate to screen D from another stack.

navigation.navigate('Nested Navigator 2', { screen: 'screen D', initial: false });

Whenever this is used screen D acts as the initial route, event though I specified initial: false in the navigation call. Is there a way to prevent this?


回答1:


once you navigate to a another component other than intial route component, of a Nested Stack Navigation, navigation.navigate('Nested Navigator 2'); will not work

Initial your navigation stack will look this on intial routes

[

{name: ScreenA ,},

{name: ScreenC,},

{name: ScreenE}

]

but whenever you navigate from sreen C to Screen D, Screen D will route will not inserted at the end of the stack , since it is Nested Navigation two

[

{name: ScreenA ,},

{name: NestedNAvigator, [{name:screenC }, {name:screenD}]},

{name: ScreenE}

]

so you will need to use, navigation.navigate('Nested Navigator 2', { screen: 'screen D' }); that is because stack changes when you navigate to a screen other than intial route,

you will need to reset routes on on Nested Component , i.e. whenever you navigate to screen D, reset route stack using commonActions, set screen, this will update the stack , and remove screen D from the stack.

import { CommonActions } from '@react-navigation/native';


componentDidMount() {
   this.props.navigation.addListener('blur', () => {
            this.props.navigation.dispatch(
                CommonActions.reset({
                  index: 1,
                  routes: [
                    { name: 'ScreenC' },
                    
                  ],
                })
              );
        });
    }

if you want to remove a certain route only instead of resetting whole navigation

 this.props.navigation.dispatch(state => {
            // Remove the route from the stack
            const routes = state.routes.filter((r => r.name !== 'ScreenC' ));
        
            return CommonActions.reset({
              ...state,
              routes,
              index: routes.length - 1,
            });
          });


来源:https://stackoverflow.com/questions/65819611/how-do-i-keep-initial-route-with-nested-navigation-with-react-navigation-v5

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!