使用 react-navigation v6 在 react-native 中通过多个堆栈/导航器共享屏幕

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+50声望赏金。 Quantal正在从信誉良好的来源寻找答案。

我有几个屏幕想在多个堆栈之间共享。 我在 github 上发现了类似的问题，但没有有效的解决方案。 当导航到共享屏幕时，我希望能够go 回到我导航的屏幕。

任何想法都非常适用。 我在下面简化了我的导航结构。

<NavigationContainer>
    <RootStack.Navigator>
      {isAuth ? (
        <RootStack.Screen name="Logged in" />
      ) : (
        <RootStack.Screen name="Not logged in" />
      )}        
    </RootStack.Navigator>
</NavigationContainer>

// First navigator for Logged in users in RootStack
<TabBottomNavigator.Navigator>
    <TabBottomNavigator.Screen name="Section1">
        <Stack.Navigator>
            <Stack.Screen name="Screen1" />
            <Stack.Screen name="Screen2" />
            <Stack.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <Stack.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
        </Stack.Navigator>
    </TabBottomNavigator.Screen>
    <TabBottomNavigator.Screen name="Section2">
            <Stack.Screen name="Screen3" />
            <Stack.Screen name="Screen4" />
            <Stack.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <Stack.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
    </TabBottomNavigator.Screen>
    <TabBottomNavigator.Screen name="Section3">
            <Stack.Screen name="Screen5" />
            <Stack.Screen name="Screen6" />
            <Stack.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <Stack.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
    </TabBottomNavigator.Screen>
</TabBottomNavigator.Navigator>

// Second navigator for users not logged in users in RootStack
// ...
// ...Navigator...
// ...

我正在导航到下面的屏幕

<TouchableOpacity onPress={() => navigation.navigate('SharedScreenX')} /> 

Answer 1

在您的代码中，只有第 1 部分堆栈屏幕位于<Stack.Navigator>中，而所有其他堆栈屏幕都不在其中，请确保所有堆栈屏幕都在 Stack Navigator 中。 还应该像这样为每个部分创建单独的堆栈导航器，

    <TabBottomNavigator.Screen name="Section1">
        <SectionOne.Navigator>
            <SectionOne.Screen name="Screen1" />
            <SectionOne.Screen name="Screen2" />
            <SectionOne.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <SectionOne.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
        </SectionOne.Navigator>
    </TabBottomNavigator.Screen>
    <TabBottomNavigator.Screen name="Section2">
       <SectionTwo.Navigator>
            <SectionTwo.Screen name="Screen3" />
            <SectionTwo.Screen name="Screen4" />
            <SectionTwo.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <SectionTwo.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
      <SectionTwo.Navigator>
    </TabBottomNavigator.Screen>

///others tabs/stacks

这应该可以解决后退导航问题。 您可以查看此文档以了解每个选项卡的堆栈导航器。 如果在此之后您仍然能够重现后面的问题，请分享它的小吃链接。