我如何使用 React Navigation v5 保留带有嵌套导航的初始路线?

问题描述

首先让我声明我知道如何使用 React 导航从一个嵌套页面导航到另一个嵌套页面.但是，每当我导航到不是初始路由的嵌套屏幕时，只要我导航回该嵌套堆栈，该屏幕就会成为第一个屏幕.

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.

示例.

• 父导航器
  • 嵌套堆栈导航器 1
    • 屏幕 A(初始路线)
    • 屏幕 B
    • 屏幕 C(初始路线)
    • 屏幕 D
    • 屏幕 E(初始路线)
    • 屏幕 F

    通常当从一个堆栈导航到 Nested Stack Navigator 2 时，我使用以下内容.

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

    navigation.navigate('Nested Navigator 2');
    

    这将我带到 screen C，这是预期的行为.但是，每当我从另一个堆栈导航到 screen D 时，我注意到每当我使用上述代码导航回 Nested Stack Navigator 2 它不再打开 screen C 而是打开screen D.

    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.

    这就是我从另一个堆栈导航到 screen D 的方式.

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

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

    无论何时使用 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?

    推荐答案

    一旦导航到嵌套堆栈导航的初始路由组件以外的另一个组件，navigation.navigate('Nested Navigator 2'); 不起作用

    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 }
    ]
    

    但是每当你从屏幕 C 导航到屏幕 D 时，屏幕 D 的路由将不会插入堆栈的末尾，因为它是嵌套导航二

    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 }
    ]
    

    所以你需要使用，navigation.navigate('Nested Navigator 2', { screen: 'screen D' });这是因为当您导航到初始路线以外的屏幕时，堆栈会发生变化，

    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 initial route,

    您需要在嵌套组件上重置路由，即每当您导航到屏幕 D，使用 commonActions 重置路由堆栈，设置屏幕，这将更新堆栈，并从堆栈中删除屏幕 D.

    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,
                });
              });
    

    这篇关于我如何使用 React Navigation v5 保留带有嵌套导航的初始路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！