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

Question

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

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

假设结构是：

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

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

Stack2ContentPage

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

相反，我想要的是始终将登录页面放在每个堆栈的底部。Stack1LandingPage因此，当我从to导航时Stack2ContentPage，Stack2堆栈将如下所示：

Stack2ContentPage
Stack2LandingPage

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

标签： react-nativereact-navigation

Answer 1

如果需要渲染导航器中指定的初始路由，可以通过设置initial: false来禁用使用指定画面作为初始画面的行为：

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

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