导航到嵌套导航器中的屏幕，然后返回

Question

假设我有 2 个 StackNavigator 并排嵌套在 BottomTabNavigator 中，如下所示：

  const StackA = () => (
    <StackANavigator.Navigator>
      <StackANavigator.Screen
        component={ScreenA1}
        name={'screenA1'}
      />

      <StackANavigator.Screen
        component={ScreenA2}
        name={'screenA2'}
      />
    </StackANavigator.Navigator>
  );

  const StackB = () => (
    <StackBNavigator.Navigator>
      <StackBNavigator.Screen
        component={ScreenB1}
        name={'screenB1'}
      />

      <StackBNavigator.Screen
        component={ScreenB2}
        name={'screenB2'}
      />
    </StackBNavigator.Navigator>
  );

  const App = () => (
    <BottomTabNavigator.Navigator>
      <BottomTabNavigator.Screen
        component={StackA}
        name={'stackA'}
      />

      <BottomTabNavigator.Screen
        component={StackB}
        name={'stackB'}
      />
    </BottomTabNavigator.Navigator>
  );

假设应用程序在 'screenA1' 上启动。我可以通过 navigate('stackB') 和 navigate('stackA') 在堆栈之间导航，例如，我可以使用 navigate('stackB', { screen: 'screenB2' }) 从 'screenA1' 导航到 'screenB2'。但是，这样做会弄乱 B 堆栈。如果我从那里调用 goBack 去 'screenA1'，然后 navigate('stackB')，我会被带到 'screenB2' 而不是那个堆栈的初始路由，即 'screenB1' .

是否可以在不在 A 堆栈中复制 'screenB2' 的情况下避免这种行为？

编辑：用于说明 A1 -> A2 -> B2 -> A2 -> A1。现在，如果我尝试去 B1，我会去 B2

Answer 1

标签导航器背后的假定逻辑是每个标签独立存在，因此在不同标签中调用屏幕是非常罕见的。

因此，您应该在每个选项卡中引用每个需要的屏幕。为防止导航路径出错，可根据标签命名。

如果您希望在单个选项卡内的当前导航顶部有一个单独的导航，您可以另外添加一个模式。

导航到嵌套导航器中的屏幕，然后返回

Navigating to a screen in a nested navigator, and going back

react-native

react-navigation

react-navigation-v5