Integrate Stack, Drawer and Tab Navigator in React Native

问题

I have tried to implement Stack, Drawer and Tab Navigator together in a single project but it's not working what I expected. First, created tab navigator, one is Home and another one is Careers. Next, creating Stack Navigator and integrate drawer as root in NavigationApp. Next, Creating Drawer Navigator integrate AppDrawer as root.

    import { StackNavigator } from 'react-navigation'
    import { TabNavigator } from 'react-navigation'
    import { DrawerNavigator } from 'react-navigation'
    import Register from './src/Register'
    import Home from './src/Home'
    import Products from './src/Products'
    import Openings from './src/Openings'
    import CareersPortal from './src/CareersPortal'
    export default class PageNavigation extends Component {
    render()
    {
     return (
     <NavigationApp/>  ); 
    }
    }


     const AppTab=TabNavigator({
     Home:{screen :Home },
     CareersPortal:{screen : CareersPortal},
     });



     const NavigationApp =StackNavigator({
     Openings:{screen:Openings},
     Register:{screen:Register},
     Home :{ screen: AppDrawer},
     });



     const AppDrawer= DrawerNavigator({
     Home:{screen: AppTab},
     Products:{screen :Products},
     }); 
     AppRegistry.registerComponent('PageNavigation', () => NavigationApp);


  Not integrated properly can anyone help me

回答1:

You can use this structure that I found really handy whit react-navigation v3x

• AppSwitchNavigator
  • AppDrawerNavigator
    • DashboardStackNavigator
      • DashboardTabNavigator

You can see this video that can explain you in much detail the answer you want.

https://www.youtube.com/watch?v=w24FE9PZpzk

来源：https://stackoverflow.com/questions/44404614/integrate-stack-drawer-and-tab-navigator-in-react-native