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

Question

I am new to react native and I haven't seen this question asked by anyone or haven't found a way around this.

Using react navigation 5 with expo.

Currently I have a the following app structure: Stack navigator inside of drawer navigator.

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

How can I get Screen 1/Screen 2 link in drawer navigator load RouteStack: Screen 1/Screen 2? These links are provided to easily jump to the required screen.

Need some guidance on how to achieve this.

I have thought of the possibility of drawer inside of stack, but there are screens inside of drawer that may not be listed in the stack. Hence, went with stack inside of drawer.

I have also tried to do a navigation.navigate(route.name) inside of RouteStack

Sample code: Drawer navigator:

<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>

Stack navigator (RouteStack) looks like this:

   <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>

Thanks in advance and help is appreciated.

Answer 1

Your method is fine. But to clarify your ideas I will give you an example.

Assume I have a main Drawer. In that drawer I can navigate to 2 different screens. Inside those screens, I can navigate and do diferent things (like going to sub-screens), but never go outside the drawer.

To do this, we would have to created nested navigators . This meaning, one type of navigator if going to be inside another one. In our case of example:

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

And then StackSon1, for example, will look like this:

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

React Navigation will also handle every drawer separately, meaning that you don't have to worry about the user creating an infinite chain of open screens.

Also, remember that, when we Nest navigators using a function (like I did) we must use return (or the simplified version of return with just parenthesis)

Hope it helps.