/**
* Created by YiBing on 2017/5/4.
*/
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
ToastAndroid,
DrawerLayoutAndroid,
TextInput,
} from 'react-native';
export default class DrawerLayoutAndroidDemo extends Component {
render() {
var navigationView = (
<View style={{flex: 1, alignItems:'center'}}>
<Text style={{width:'100%', textAlign:'center', marginTop:20}}>相册</Text>
<Text style={{width:'100%', textAlign:'center', marginTop:20}}>账号信息</Text>
<Text style={{width:'100%', textAlign:'center', marginTop:20}}>版本更新</Text>
<Text style={{width:'100%', textAlign:'center', marginTop:20}}>关于</Text>
<TouchableOpacity onPress={() => {this.drawer.closeDrawer()}}>
<Text style={{width:'100%', textAlign:'center', marginTop:20}}>关闭抽屉</Text>
</TouchableOpacity>
</View>
);
return (
/*
* 抽屉布局(DrawerLayoutAndroid)，属性如下：
* 1.宽度--drawerWidth，类型：number
* 2.背景颜色--drawerBackgroundColor，类型：rgba
* 3.锁定模式--drawerLockMode，类型：enum('unlocked', 'locked-closed', 'locked-open')
* unlocked (默认值)，抽屉可以响应打开和关闭的手势操作。
* locked-closed，抽屉将保持关闭，不可用手势打开。
* locked-open，抽屉将保持打开，不可用手势关闭。
* 无论抽屉处于何种状态，都可以调用openDrawer/closeDrawer这两个方法打开和关闭。
* 4.抽屉位置（从屏幕哪边滑出，左边还是右边）--drawerPosition，类型：enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)
* 5.在拖动的过程中是否隐藏软键盘--keyboardDismissMode，类型：enum('none', "on-drag")
* none (默认值)，拖拽不会隐藏软键盘;
* on-drag 当拖拽开始的时候隐藏软键盘。
*
* 抽屉布局(DrawerLayoutAndroid)，回调函数如下：
* 1.抽屉被关闭之后调用此回调函数--onDrawerClose
* 2.抽屉被打开之后调用此回调函数--onDrawerOpen
* 3.抽屉产生交互的时候调用此回调函数--onDrawerSlide
* 4.抽屉的状态变化时调用此回调函数--onDrawerStateChanged, 有三种状态：
* idle（空闲），表示现在导航条上没有任何正在进行的交互。
* dragging（拖拽中），表示用户正在与导航条进行交互。
* settling（停靠中），表示用户刚刚结束与导航条的交互，导航条正在结束打开或者关闭的动画。
* 5.渲染一个可以从屏幕一边拖入的导航视图--renderNavigationView
* 6.statusBarBackgroundColor
*
* 抽屉布局(DrawerLayoutAndroid)，Methods如下：
* 1.打开抽屉--openDrawer()
* 2.关闭抽屉--closeDrawer()
*/
<DrawerLayoutAndroid
ref={(drawerObj) => {this.drawer = drawerObj;}}
drawerWidth={120}
drawerPosition={DrawerLayoutAndroid.positions.Left}
drawerBackgroundColor='#00ffffaa'
drawerLockMode={'unlocked'}
keyboardDismissMode={'on-drag'}
renderNavigationView={() => navigationView}
onDrawerSlide={() => {}}
onDrawerOpen={() => {ToastAndroid.show("打开抽屉", ToastAndroid.SHORT);}}
onDrawerClose={() => {ToastAndroid.show("关闭抽屉", ToastAndroid.SHORT);}}
onDrawerStateChanged={(state) => {
ToastAndroid.show(state, ToastAndroid.SHORT);
}}
>
<View style={{flex: 1, alignItems: 'center'}}>
<TouchableOpacity onPress = {()=>{
this.drawer.openDrawer();
}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>打开抽屉</Text>
</TouchableOpacity>
<TextInput
style={{width:'80%', height:100, margin: 10, fontSize: 15,}}
placeholder="keyboardDismissMode测试，这个Demo的效果：打开抽屉，软键盘隐藏"
multiline={true}
/>
</View>
</DrawerLayoutAndroid>
);
}
}
const styles = StyleSheet.create({});
效果图：
