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