Question

假设我在 StackNavigator 中并排嵌套了 2 个 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

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

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

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

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

1 个答案: