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

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）。因此，当我点击 Tab A 时，我会转到 ScreenA1，然后在那里我可以转到 ScreenA2。 Tab B 也一样。现在，在选项卡 B 的屏幕 B2 上，我有一个按钮，可以将用户导航到屏幕 A2，并在该屏幕上预填充一些数据。

如果我这样做：

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

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

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

Answer 1

你可以替换

navigation.navigate('ScreenA1'...

由

navigate.push('ScreenA1'...

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

Answer 2

这样解决了：

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

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

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

Navigating from a nested screen to another nested screen in a different Tab Stack (react-navigation)

react-native

react-navigation

react-navigation-v5