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

Question

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

任何想法都会受到极大的赞赏。我在下面简化了我的导航结构。

<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>，所有其他堆栈屏幕都不在其中，请确保所有堆栈屏幕都在堆栈导航器中。还应该为每个部分创建单独的堆栈导航器，如下所示，

    <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

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