RN控件之DrawerLayoutAndroid导航栏

 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  */
 'use strict';
 import React, {
   AppRegistry,
   Component,
   StyleSheet,
   Text,
   View,
   DrawerLayoutAndroid
 } from 'react-native';

 class MyProject2 extends Component {
   render() {
       var navigationView =(
           <View style={{flex:1,backgroundColor:'blue'}}>
               <Text style={{margin:10,color:'#fff',fontSize:15,textAlign:'center'}}>
                   我是导航功能栏标题
               </Text>
               <Text style={{marginTop:10,marginLeft:20,color:'#fff',fontSize:15,textAlign:'left'}}>
                   1.功能1
               </Text>
               <Text style={{marginTop:10,marginLeft:20,color:'#fff',fontSize:15,textAlign:'left'}}>
                   2.功能2
               </Text>
           </View>
       )
       return(
           <DrawerLayoutAndroid
               drawerWidth={150} drawerPosition={DrawerLayoutAndroid.positions.left}
               renderNavigationView={() => navigationView}>
               <View style={{flex:1,alignItems:'center'}}>
                   <Text style={{margin:10,fontSize:15,textAlign:'right'}}>
                         我是主布局内容
                   </Text>
               </View>
           </DrawerLayoutAndroid>
       );

   }
 }
 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):该方法进行渲染一个导航抽屉的视图(用于用户从屏幕边缘拖拽出来)