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

Posted 2023-02-21

技术标签:

【中文标题】从嵌套屏幕导航到不同选项卡堆栈中的另一个嵌套屏幕（反应导航）【英文标题】：Navigating from a nested screen to another nested screen in a different Tab Stack (react-navigation) 【发布时间】：2021-12-03 22:23:51 【问题描述】：

我正在使用 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 并从那里调用屏幕，而用户不会看到所有屏幕都在闪烁。

【问题讨论】：

【参考方案1】：

解决了这个问题：

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

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

【讨论】：

【参考方案2】：

你可以替换