react-native – 使用堆栈导航器实现本机抽屉导航

我正在尝试开发一个应用程序来理解反应原生基础知识.我在反应导航,我想在我的应用程序的每个页面看到菜单.我开发了类似的东西;

-StackNavigtor
  – 登录屏幕
 -DrawerNagivation
   -Screen1
   -Screen2

但是,内部抽屉的组件无法从堆叠功能中受益.使用堆栈导航器获取抽屉导航的最佳方法是什么,以便在我的应用程序的每个页面中获取菜单.

谢谢.

是的,您可以按照以下步骤操作.

> App.js

import React, {Component} from 'react';' 
     import {Platform, StyleSheet, Text, View} from 'react-native';
     import { createStackNavigator } from 'react-navigation'; 
     import Login from './src/authScreen/login/Login';
     import DrawerNavigator from './src/navigation/drawerNavigation/DrawerNavigator';

06001

然后创建src文件夹并创建DrawerNavigator.js.并输入以下代码.

import React from 'react' import { StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions, Image} from 'react-native'; 

 import { createDrawerNavigator, DrawerItems } from 'react-navigation';
 import Icon from 'react-native-vector-icons/FontAwesome5';import DrawerScreen1
 from '../../screens/drawerScreen/DrawerScreen1' import DrawerScreen2
 from '../../screens/drawerScreen/DrawerScreen2' import DrawerScreen3
 from '../../screens/drawerScreen/DrawerScreen3' // import { Right }
 from 'native-base';

     const CustomDrawerComponent = (props)=>(   <SafeAreaView>
           <View style={{height:150, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
               <Image source={require('../../Images/user.jpg')} style={{height:120, width:120, borderRadius:60}} />
           </View>
           <ScrollView>
               <DrawerItems {...props} />
           </ScrollView>   </SafeAreaView> )


     export default createDrawerNavigator(>     
       DrawerScreen1: {
         screen: DrawerScreen1,
         navigationOptions: {
           drawerLabel: 'DrawerScreen1',
           drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
         }   },

       DrawerScreen2: {
         screen: DrawerScreen2,
         navigationOptions: {
           drawerLabel: 'DrawerScreen2',
           drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
         }   },

       DrawerScreen3: {
         screen: DrawerScreen3,
         navigationOptions: {
           drawerLabel: 'DrawerScreen3',
           drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
         }   }, }, {   drawerPosition :"right",   contentComponent:CustomDrawerComponent

     });

这里CustomDrawerComponent添加一个抽屉图标.

并添加login.js

06003

更多：您可以参考https://github.com/ChanakaUOMIT/React-Native-Root-boiler-plate/tree/master这个项目..这里还在一个项目中添加堆栈导航,选项卡导航和抽屉导航.