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

发布时间：2020-12-15 16:20:17 所属栏目：百科来源：网络整理

导读：我正在尝试开发一个应用程序来理解反应原生基础知识.我在反应导航,我想在我的应用程序的每个页面看到菜单.我开发了类似的东西; -StackNavigtor ? – 登录屏幕 ?-DrawerNagivation ???-Screen1 ???-Screen2 但是,内部抽屉的组件无法从堆叠功能中受益.使用堆栈

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

-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,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',DrawerScreen3: {
         screen: DrawerScreen3,navigationOptions: {
           drawerLabel: 'DrawerScreen3',},{   drawerPosition :"right",contentComponent:CustomDrawerComponent

     });

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

并添加login.js

06003

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

enter image description here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!