Question

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

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

假设结构是：

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

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

Stack2ContentPage

因此标题上没有“返回”按钮可以返回到 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)

1 个答案: