React native：如何让多个抽屉导航器链接指向同一个堆栈导航器中的屏幕

Question

我是原生反应的新手，我还没有看到有人问过这个问题，也没有找到解决这个问题的方法。

将 react navigation 5 与 expo 结合使用。

目前我有以下应用程序结构： 抽屉导航器内的堆栈导航器。

Example of page structure:
Drawer Navigator ( links ):
Home (RouteStack)
Screen 1 
Screen 2
Screen 3

RouteStack( screens) :
Home ( initial route )
Screen 1
Screen 2
Screen 4

如何在抽屉导航器加载 RouteStack：屏幕 1/屏幕 2 中获取屏幕 1/屏幕 2 链接？ 提供这些链接是为了轻松跳转到所需的屏幕。

需要一些关于如何实现这一点的指导。

我考虑过抽屉在堆栈内的可能性，但抽屉内的屏幕可能未在堆栈中列出。因此，将堆栈放在抽屉内。

我也尝试在 RouteStack 中做一个 navigation.navigate(route.name)

示例代码： 抽屉导航器：

<NavigationContainer>
      <Drawer.Navigator drawerContent={(props, navigation) => <CustomDrawerContent {...props} {...navigation} />}>
        <Drawer.Screen name="Home" component={RouteStack} />
        <Drawer.Screen name="MyItems" component={RouteStack} />
        <Drawer.Screen name="ContactRep" component={RouteStack} />
        <Drawer.Screen name="Settings" component={SettingInfo} />
      </Drawer.Navigator>
    </NavigationContainer>

堆栈导航器（RouteStack）如下所示：

   <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{ gestureEnabled: false, headerTitleAlign: 'auto' }}
    // headerMode="float"
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: '',
          headerStyle: {
            backgroundColor: '#fff',
          },
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'bold'
          },
          headerLeft: props => <HeaderLeftMenu {...props} />,
          headerRight: props => <HeaderRightMenu {...props} />,
          headerTitle: props => <HeaderTitle {...props} />
        }}
      />
      <Stack.Screen
        name="ContactRep"
        component={ContactRep}
        options={{ headerTitle: props => <HeaderTitle {...props} /> }}
      />
      <Stack.Screen
        name="MyItems"
        component={MyItems}
        options={{ headerTitle: (props, navigation) => <HeaderTitle {...props} /> }}
           />

    </Stack.Navigator>

在此先感谢您的帮助。

Answer 1

你的方法很好。但是为了澄清你的想法，我会给你一个例子。

假设我有一个主抽屉。在那个抽屉里，我可以导航到 2 个不同的屏幕。在这些屏幕内，我可以导航和做不同的事情（比如转到子屏幕），但绝不会走出抽屉。

为此，我们必须创建嵌套导航器。这意味着，如果要进入另一种导航器，则一种导航器。在我们的例子中：

<Papa Drawer>
 <Screen 1 component={StackSon1}>
 <Screen 2 component={StackSon2}>
<Papa Drawer>

例如，StackSon1 将如下所示：

StackSon = () => {
return (
<Stack.Navigator>
 <Stack.Screen>
 <Stack.Screen>
 ...
  )
}

React Navigation 还将单独处理每个抽屉，这意味着您不必担心用户会创建无限的打开屏幕链。

另外，请记住，当我们使用函数嵌套导航器时（就像我所做的那样），我们必须使用 return（或仅带括号的 return 的简化版本）

希望对你有帮助。