RN控件之DrawerLayoutAndroid导航栏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet, 10 Text, 11 View, 12 DrawerLayoutAndroid 13 } from 'react-native'; 14 15 class MyProject2 extends Component { 16 render() { 17 var navigationView =( 18 <View style={{flex:1,backgroundColor:'blue'}}> 19 <Text style={{margin:10,color:'#fff',fontSize:15,textAlign:'center'}}> 20 我是导航功能栏标题 21 </Text> 22 <Text style={{marginTop:10,marginLeft:20,color:'#fff',fontSize:15,textAlign:'left'}}> 23 1.功能1 24 </Text> 25 <Text style={{marginTop:10,marginLeft:20,color:'#fff',fontSize:15,textAlign:'left'}}> 26 2.功能2 27 </Text> 28 </View> 29 ) 30 return( 31 <DrawerLayoutAndroid 32 drawerWidth={150} drawerPosition={DrawerLayoutAndroid.positions.left} 33 renderNavigationView={() => navigationView}> 34 <View style={{flex:1,alignItems:'center'}}> 35 <Text style={{margin:10,fontSize:15,textAlign:'right'}}> 36 我是主布局内容 37 </Text> 38 </View> 39 </DrawerLayoutAndroid> 40 ); 41 42 } 43 } 44 AppRegistry.registerComponent('MyProject2', () => MyProject2);
一.DrawerLayoutAndroid
1.该组件封装了Android平台的DrawerLayout空间(只限于Android平台).该抽屉页面(经常用于导航页面)是通过reanderNavigationView进行渲染的.该DrawerlayoutAndroid中的子视图会变成主视图(主要用于放置内容)
2.属性
(1)View的属性使用,继承了View控件的属性信息(例如:宽和高,背景颜色,边距等相关属性样式)
(2)drawerPosition:参数为枚举类型(DrawerConst.DrawerPosition.Left,DrawerConst.DrawerPosition.Right)
用来指定导航菜单从那一侧滑动出来,两个参数:
DrawerLayoutAndroid.positions.Left和DrawerLaoutAndroid.positions.Right
(3)drawerWidth:指定导航菜单视图的宽度,也就是说该侧面导航视图可以从屏幕边缘拖拽到屏幕的宽度
(4)keyboardDismissMode:参数为枚举类型('none','on-drag')进行指定在导航视图拖拽的过程中是否要隐藏键盘
none:(默认值),默认不会隐藏键盘
on-drag:当拖拽开始的时候进行隐藏键盘
(5)onDrawerClose(function):当导航视图被关闭后进行回调该方法
(6)onDrawerOpen(function):当导航视图被打开后进行回调该方法
(7)onDrawerSlide(function):当导航视图和用户进行交互的时候调用该方法
(8)onDrawerStateChanged(function):当导航视图的状态发生变化的时候调用该方法.有以下三种状态:
idle(空闲):表示导航视图上面没有任何交互状态
dragging(正在拖拽中):表示用户正在和导航视图产生交互动作
setting(暂停-刚刚结束):表示用户刚刚结束和导航视图的交互动作.当前导航视图正在打开或者关闭拖拽滑动动画效果
(9)renderNavigationView(function):该方法进行渲染一个导航抽屉的视图(用于用户从屏幕边缘拖拽出来)