React Native中使用React Navigation v6实现多栈/导航器共享屏幕

以下是两种可行的解决方案，针对你在多导航栈间共享屏幕且需返回原发起屏幕的需求：

方案1：将共享屏幕提升至根导航栈（推荐） #

把共享屏幕注册到最外层的RootStack中，让所有子导航器共享同一组屏幕实例，同时保证返回逻辑正确。

步骤1：修改RootStack结构 #

<NavigationContainer>
  <RootStack.Navigator>
    {isAuth ? (
      <>
        {/* 将登录后的Tab导航作为根栈的一个子屏幕 */}
        <RootStack.Screen 
          name="LoggedTabContainer" 
          component={TabBottomNavigator} 
          options={{ headerShown: false }} 
        />
        {/* 在根栈中注册共享屏幕 */}
        <RootStack.Screen name="SharedScreen1" component={SharedScreen1} />
        <RootStack.Screen name="SharedScreen2" component={SharedScreen2} />
      </>
    ) : (
      <RootStack.Screen name="Not logged in" component={AuthNavigator} />
    )}        
  </RootStack.Navigator>
</NavigationContainer>

步骤2：移除子栈中的重复注册 #

每个Tab的内部栈只保留专属屏幕，删除其中的SharedScreen1和SharedScreen2注册，例如Section1的栈：

<Stack.Navigator>
  <Stack.Screen name="Screen1" component={Screen1} />
  <Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>

步骤3：导航到共享屏幕 #

在任意子屏幕中直接调用导航方法即可，无需额外处理：

<TouchableOpacity onPress={() => navigation.navigate('SharedScreen1')}>
  <Text>进入共享屏幕1</Text>
</TouchableOpacity>

此时共享屏幕会被推到根栈顶部，调用navigation.goBack()时会直接回到发起跳转的原屏幕（如Screen1、Screen3等）。

方案2：封装共享栈组件减少冗余 #

如果需要每个Tab的共享屏幕保持独立状态，可以将包含共享屏幕的栈封装为可复用组件，避免重复代码：

步骤1：创建共享栈组件 #

const SharedStack = ({ children }) => (
  <Stack.Navigator>
    {/* 渲染Tab专属屏幕 */}
    {children}
    {/* 统一添加共享屏幕 */}
    <Stack.Screen name="SharedScreen1" component={SharedScreen1} />
    <Stack.Screen name="SharedScreen2" component={SharedScreen2} />
  </Stack.Navigator>
);

步骤2：在Tab中复用组件 #

<TabBottomNavigator.Navigator>
  <TabBottomNavigator.Screen name="Section1">
    <SharedStack>
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
    </SharedStack>
  </TabBottomNavigator.Screen>
  <TabBottomNavigator.Screen name="Section2">
    <SharedStack>
      <Stack.Screen name="Screen3" component={Screen3} />
      <Stack.Screen name="Screen4" component={Screen4} />
    </SharedStack>
  </TabBottomNavigator.Screen>
  {/* Section3同理 */}
</TabBottomNavigator.Navigator>

这种方式下，每个Tab的栈中仍包含独立的共享屏幕实例，跳转后返回时会回到对应Tab的原屏幕，同时避免了重复编写共享屏幕的注册代码。

内容的提问来源于stack exchange，提问作者Quantal