如何始终将初始屏幕推送到堆栈导航器 (react-navigation@5)

Question

我正在使用 react-navigation（版本 5）库构建一个 React Native 应用程序来实现导航。

我有一个选项卡导航器，每个选项卡上都包含一个堆栈导航器。每个堆栈导航器都有一个“着陆页”，即激活选项卡时显示的 initialRouteName。

假设结构是：

Tabs
|
+-- Stack1
|     |
|     +-- Stack1LandingPage
|     |
|     +-- Stack1ContentPage
|
+-- Stack2
      |
      +-- Stack2LandingPage
      |
      +-- Stack2ContentPage

问题是，当我尝试直接从 Stack1LandingPage 导航到 Stack2ContentPage 时，Stack2 堆栈如下：

Stack2ContentPage

因此 header 上没有返回 Stack2LandingPage 的“后退”按钮。

我想要的是始终将着陆页放在每个堆栈的底部。因此，当我从 Stack1LandingPage 导航到 Stack2ContentPage 时，Stack2 堆栈将如下所示：

Stack2ContentPage
Stack2LandingPage

如何使用 react-navigation 版本 5 实现？

Answer 1

如果需要渲染导航器中指定的初始路由，可以通过设置initial: false:

来禁止使用指定屏幕作为初始屏幕的行为

navigation.navigate('Root', {
  screen: 'Settings',
  initial: false,
});

参考：https://reactnavigation.org/docs/nesting-navigators/#rendering-initial-route-defined-in-the-navigator

如何始终将初始屏幕推送到堆栈导航器 (react-navigation@5)

How to always push initial screen to stack navigator (react-navigation@5)

react-native

react-navigation