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

Question

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

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

假设结构是：

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

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

Stack2ContentPage

因此标题上没有“返回”按钮可以返回到Stack2LandingPage.

我想要的是始终在每个堆栈的底部放置登录页面。因此，当我从Stack1LandingPageto导航时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