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

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

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

因此，您应该在每个选项卡中引用每个所需的屏幕。为防止导航路线出错，您可以根据选项卡对其进行命名。

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