在 React Native 中集成 Stack、Drawer 和 Tab Navigator [英] Integrate Stack, Drawer and Tab Navigator in React Native

问题描述

我尝试在一个项目中一起实现堆栈、抽屉和标签导航器，但它没有按我的预期工作.首先，创建标签导航器，一个是主页，另一个是职业.接下来，创建 Stack Navigator 并将 drawer 作为 root 集成到 NavigationApp 中.接下来，创建 Drawer Navigator 以 root 身份集成 AppDrawer.

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

推荐答案

你可以使用这个我觉得非常方便的结构体 react-navigation v3x

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

      这篇关于在 React Native 中集成 Stack、Drawer 和 Tab Navigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！