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

Question

我是新来的本地人，我还没有看到任何人问这个问题，或者还没有找到解决这个问题的方法。

将expo导航5与博览会一起使用。

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

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

如何在抽屉式导航器中加载Screen1 / Screen 2链接到RouteStack：Screen 1 / Screen 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的简化版本）

希望有帮助。