如何使用 React Navigation Drawer 切换屏幕

Question

I have the following navigation structure:

• App Navigator (switch navigator)
  • Auth Screens (stack navigator)
  • Home (tab navigator)
    • Feed
    • Others
    • Profile (contains drawer)
  • Settings, Legal info etc.

Example Drawer contents

• Settings (navigates to screen out of tab navigator)
• Notifications & Sound

How would I add the labels of and navigate to 'Settings, Legal info' through the drawer? Extra: 'Profile' label shouldn't show on the drawer.

A similar example is the Instagram drawer in the profile tab. When you chose an option it pushes a new screen.

Thanks in advance.

Answer 1

I've come up with clunky yet working solution.

Drawer navigation routes

`...
// To hide a specific route (Profile)
HiddenLabel:{
    screen:ScreenA,
    navOptions:{
        drawerLabel:()=>null
    }
}
A:{
    screen:()=>null
    navOptions:{
        drawerLabel:'Settings'
    }
}
...`

Drawer navigation custom component

`
...
contentComponent:(props)=>(
    // Should be wrapped in SafeAreaView
    <DrawerItems {...props} onItemPress={
        ({route})=>{
            // query and use props.navigation to navigate to route.routeName
        }
    }/>
)
...
`

And that's pretty much it. If you have another solution please do post it.