DrawerLayoutAndroid
参考文档
封装了 Android 平台DrawerLayout的 React 组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且 DrawerLayoutAndroid 的直接子视图会成为主视图（用于放置内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。
译注：此组件仅能在 Android 上使用。推荐使用跨平台的react-navigation中的 DrawerNavigation 来代替此组件。
Props
| 属性 | 类型 | 必填 | 描述 |
| renderNavigationView | function | 是 | 导航视图将呈现在屏幕的侧面，并且可以被拉入。 |
| onDrawerClose | function | 否 | 每当导航视图关闭时调用的函数 |
| drawerPosition | enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | 否 | 指定抽屉从中滑入的屏幕一侧。 |
| drawerWidth | number | 否 | 指定抽屉的宽度，更确切地说是指定从窗口边缘拉入的视图的宽度。 |
| keyboardDismissMode | enum('none', 'on-drag') | 否 |
确定键盘是否响应拖动而解散。
'none'（默认），拖动不会关闭键盘。 “拖动”，开始拖动时将关闭键盘。 |
| drawerLockMode | enum('unlocked', 'locked-closed', 'locked-open') | 否 |
指定抽屉的锁定模式。 抽屉可以锁定为3种状态：
解锁（默认），表示抽屉将响应（打开/关闭）触摸手势。 锁定关闭，这意味着抽屉将保持关闭状态且不响应手势。 锁定打开，这意味着抽屉将保持打开状态并且不响应手势。 抽屉仍可以通过编程方式打开和关闭（openDrawer / closeDrawer）。 |
| onDrawerOpen | function | 否 | 每当打开导航视图时调用的函数 |
| onDrawerSlide | function | 否 | 与导航视图进行交互时调用的函数 |
| onDrawerStateChanged | function | 否 |
抽屉状态更改时调用的函数。 抽屉可以处于3种状态：
空闲，表示当时与导航视图没有交互 拖动，表示当前与导航视图存在交互 稳定，这意味着与导航视图存在交互，并且导航视图现在正在完成其关闭或打开动画 |
| drawerBackgroundColor | color | 否 |
指定抽屉的背景色。 默认值为白色。 如果要设置抽屉的不透明度，请使用rgba。 例：
return (
);
|
| statusBarBackgroundColor | color | 否 | 使抽屉占据整个屏幕，并绘制状态栏的背景，以使其在状态栏上打开。 它只会对API 21+产生影响。 |
方法
openDrawer()
openDrawer();
打开抽屉。
openDrawer()
closeDrawer();
关闭抽屉。
Example
示例
import React, { Component } from 'react';
import {
StyleSheet,
DrawerLayoutAndroid,
TouchableOpacity,
View,
Image,
Text
} from 'react-native';
export class pageComponent extends Component {
render() {
let imageSource={uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583480946734&di=2df09c69837af079044abc874e1750c2&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0704%2Fe53c868ee9e8e7b28c424b56afe2066d.jpg'};
let navigationView = (
<View style={styles.container}>
<View style={styles.navView}>
<Image
style={styles.headImg}
source = {imageSource}/>
<Text style={styles.draw_title}>安卓侧滑</Text>
</View>
<TouchableOpacity
onPress={this.close}>
<View style={styles.drawerItemView}>
<Image
style={styles.itemImg}
source = {imageSource}/>
<Text
style={styles.item_text}>首页</Text>
</View>
</TouchableOpacity>
<View style={styles.drawerItemView}>
<Image
style = {styles.itemImg}
source = {imageSource}/>
<Text
style={styles.item_text}>订单</Text>
</View>
<View style={styles.drawerItemView}>
<Image
style = {styles.itemImg}
source = {imageSource} />
<Text
style={styles.item_text}>我的</Text>
</View>
</View>
);
return (
<DrawerLayoutAndroid
ref={(drawer) => { this.drawer = drawer; }}
drawerWidth={230}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.container}>
<View style={styles.title_view}>
<TouchableOpacity
onPress={this.open}>
<Image
style={styles.leftImage}
source = {imageSource}
/>
</TouchableOpacity>
<Text style={styles.titleText}>
安卓侧滑Demo
</Text>
<Text style={styles.titleText}>
更多选项
</Text>
</View>
</View>
</DrawerLayoutAndroid>
)
}
open = () => {
this.drawer.openDrawer();
}
close = () => {
this.drawer.closeDrawer();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
navView: {
flexDirection: 'column',
height: 150,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#00ff00',
},
drawerItemView: {
flexDirection: 'row',
height: 50,
paddingLeft: 30,
paddingTop: 6,
paddingBottom: 6,
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
title_view: {
flexDirection: 'row',
height: 90,
paddingLeft: 15,
paddingRight: 15,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#27b5ee',
},
titleText: {
color: '#0000ff',
fontSize: 18,
textAlign: 'center'
},
headImg: {
width: 50,
height: 50
},
itemImg: {
width: 20,
height: 20
},
draw_title: {
marginTop: 10,
fontSize: 16,
color: 'white'
},
item_text: {
fontSize: 14,
color: 'grey',
marginLeft: 10
},
leftImage: {
height: 30,
width:30
}
});