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

Question

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

例子.

家长导航器
- 嵌套堆栈导航器 1
  - 屏幕A（初始路线）
  - 屏幕 B
- 嵌套堆栈导航器 2
  - 屏幕 C（初始路线）
  - 屏幕 D
- 嵌套堆栈导航器 2
  - 屏幕 E（初始路线）
  - 屏幕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。有什么办法可以避免这种情况吗？

Answer 1

一旦您导航到嵌套堆栈导航的初始路由组件以外的另一个组件，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('Nested Navigator 2', { 屏幕: '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,
            });
          });

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

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

react-native

react-navigation

react-navigation-stack