React Native 组件之DrawerLayoutAndroid(抽屉)

/** * 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({});

效果图：