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

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

Example.

• Parent Navigator
  • Nested Stack Navigator 1
    • 屏幕A（初始路线）
    • screen B
  • Nested Stack Navigator 2
    • 屏幕 C（初始路线）
    • screen D
  • Nested Stack Navigator 2
    • 屏幕 E（初始路线）
    • screen F

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

navigation.navigate('Nested Navigator 2');

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

这就是我导航到的方式screen D来自另一个堆栈。

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

每当使用这个screen D充当初始路线，尽管我指定了事件initial: false在导航通话中。有办法防止这种情况吗？

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

初始导航堆栈将在初始路线上显示此内容

[
 { name: ScreenA },
 { name: ScreenC },
 { name: ScreenE }
]

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

[
 { name: ScreenA },
 { 
   name: NestedNavigator,
   [
    { name: screenC }, 
    { name: screenD }
   ]
 },
 { name: ScreenE }
]

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

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

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

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

如果您只想删除某个路线而不是重置整个导航

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