1

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

使用带有博览会的反应导航 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

如何在抽屉导航器加载 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>

在此先感谢您的帮助。

4

1 回答 1

0

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

假设我有一个主抽屉。在那个抽屉里，我可以导航到 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 的简化版本）

希望能帮助到你。

于 2020-04-27T22:14:41.013 回答