React Native控件之DrawerLayoutAndroid抽屉导航组件讲解

（一）前言

这篇文章主要讲解在Android平台常用的界面结构模式的组件DrawerLayoutAndroid。

DrawerLayoutAndroid组件封装了Android平台的DrawerLayout控件，也就是说这个组件只能在Android平台上使用。这个组件实现了抽屉界面（通常用作Android平台的导航页面），这个抽屉界面是通过renderNavigationView进行渲染的，点击了一个抽屉选项之后，子视图会变成主视图。在导航菜单中，导航栏的视图在屏幕中一开始是隐藏的，但是我们可以通过drawerPosition指定位置把导航视图拖拽出来，最终拖拽出来的抽屉视图宽度大小由drawerWidth属性进行指定。

（二）基本使用介绍

其实学习任何组件，都是学习用法，要会用这个组件就必须熟知它的属性和方法即可。直接上官方代码：

  <DrawerLayoutAndroid
        drawerWidth={150} drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView }>
           <View style={{flex:1, alignItems:'center'}}>
               <Text style={{margin:10, fontSize:15, textAlign:'right'}}>
                  Hello
               </Text>
               <Text style={{margin:10, fontSize:15, textAlign:'right'}}>
                  React Native World!
               </Text>
           </View>
        </DrawerLayoutAndroid>

运行效果如下：

（三）属性列表

（四）方法（Methods）

1. openDrawer()
   打开这个drawer。
2. closeDrawer()
   关闭这个drawer。