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>

运行效果如下：

（三）属性列表

名称 value 功能 View Props view的属性 view的所有属性 drawerBackgroundColor color 指定drawer的背景颜色。默认颜色是白色，如果你想去设置drawer的不透明度（opacity），使用rgba格式颜色：drawerBackgroundColor='rgba(0,0,0,0.5)' drawerLockMode enum(‘unlocked’, ‘locked-closed’, ‘locked-open’) 指定drawer的锁模式，有三种状态：不锁（unlocked），即drawer将根据手势交互打开与关闭，默认是该模式；关闭锁（locked-closed），即drawer保持关闭并且不会响应手势交互；开启锁（locked-open），即drawer保持开启并且不会响应手势交互。通常在开发中开启与关闭是通过程序控制。 drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) 指定drawer将从屏幕哪边滑入 drawerWidth number 指定drawer的宽度 keyboardDismissMode enum(‘none’,’on-drag’) 决定drawer是否可以通过拖拽解除，默认是‘none’，不能通过拖拽解除；‘on-drag’，即可以通过拖拽解除drawer。 onDrawerClose function 被调用当drawer导航无论何时被关闭 onDrawerOpen function 被调用当drawer导航无论何时被开启 onDrawerSlide function 被调用当drawer导航无论何时与用户有一个交互动作 onDrawerStateChanged function 被调用当drawer状态发生改变完毕。drawer有三种状态：idle，即此时此刻用户和drawer导航视图没有交互发生；dragging，即此时此刻用户和drawer正在发生交互；settling，即过去有一个交互，但是打开或者关闭drawer的动画已经结束了。也就是这三种状态的切换就会触发调用该function。 renderNavigationView function drawer界面视图由该属性指定，但是该属性是一个function，格式为{ ()=>视图 } statusBarBackgroundColor color 让drawer带有全屏功能，然后绘制状态栏背景色去允许它覆盖状态栏，这个只能在API21+以上有效。

（四）方法（Methods）

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