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%',marginTop:20}}>账号信息</Text>
                <Text style={{width:'100%',marginTop:20}}>版本更新</Text>
                <Text style={{width:'100%',marginTop:20}}>关于</Text>
                <TouchableOpacity onPress={() => {this.drawer.closeDrawer()}}>
                    <Text style={{width:'100%',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,}}
                        placeholder="keyboarddismissMode测试，这个Demo的效果：打开抽屉，软键盘隐藏"
                        multiline={true}
                    />
                </View>
            </DrawerLayoutAndroid>
        );
    }
}

const styles = StyleSheet.create({});

效果图：

原文地址：https://www.jb51.cc/react/304088.html