从嵌套屏幕导航到不同选项卡堆栈中的另一个嵌套屏幕（反应导航）

Question

我正在使用 react navigation 5（带有 react native），我的导航设置如下所示：

// Root
<NavigationContainer>
  <RootStack.Navigator mode="modal" headerMode="none">
    <RootStack.Screen name="Auth" component={AuthStackNavigator} />
    <RootStack.Screen name="App" component={BottomTabsNavigator} />
  </RootStack.Navigator>
</NavigationContainer>

// App
<Tab.Navigator tabBar={bottomTabBar}>
  <Tab.Screen name="ScreenA1" component={StackA} />
  <Tab.Screen name="ScreenB1" component={StackB} />
</Tab.Navigator>

// TAB A
<StackA.Navigator headerMode="none">
  <StackA.Screen name="ScreenA1" component={ScreenA1} />
  <StackA.Screen name="ScreenA2" component={ScreenA2} />
</StackA.Navigator>

// TAB B
<StackB.Navigator headerMode="none">
  <StackB.Screen name="ScreenB1" component={ScreenB2} />
  <StackB.Screen name="ScreenB2" component={ScreenB2} />
</StackB.Navigator>

所以在我的应用程序中，我有 2 个底部选项卡（选项卡 A 和选项卡 B），每个选项卡都有 2 个嵌套屏幕（屏幕 A1>A2 和 B1>B2）。 因此，当我点击选项卡 A 时，我会转到 ScreenA1，然后在那里我可以转到 ScreenA2。选项卡 B 相同。 现在，在选项卡 B 的 ScreenB2 上，我有一个按钮可以将用户导航到屏幕 A2，并在该屏幕上预填充一些数据。

如果我这样做：

navigation.navigate('ScreenA1', {
  screen: 'ScreenA2',
  params: { data },
});

我会带着数据登陆 ScreenA2，但是：
如果我之前访问过 ScreenA2，之前的状态仍然存在，我可以看到它的旧状态和数据。
如果我之前从未访问过 ScreenA2，它现在不在 Tab A Stack 内，而是推到了 ScreenB2 的顶部。

所以我想我需要在导航到它之前重置屏幕（或在我离开时卸载）并确保它在创建时放入 Tab A Stack 中，所以当我尝试从屏幕 A2 我降落在屏幕 A1 上。也许先导航回 root 并从那里调用屏幕，而用户不会看到所有屏幕都在闪烁。

Answer 1

解决了这个问题：

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: 'ScreenA1',
        state: {
          routes: [
            {
              name: 'ScreenA1',
            },
            {
              name: 'ScreenA2',
              params: { data },
            },
          ],
        },
      },
    ],
  }),
);

请注意我在那里有两次“ScreenA1”。我想这是必要的，因为 Navigator 和 Navigator 中的第一个 Screen 共享相同的路由名称

Answer 2

你可以替换

navigation.navigate('ScreenA1'...

由

navigate.push('ScreenA1'...

这样，新的路线将添加到您的导航堆栈中，并带有新的状态和道具。