ReactNative-DrawerLayoutAndroid

效果图：

组件比较简单且仅限Android使用只需要注意几个属性使用就可以了！！！

drawerWidth 导航宽度
drawerPosition 从左侧出还是从右侧出如：drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView 导航视图

keyboardDismissMode enum(‘none’, “on-drag”)
指定在拖拽的过程中是否要隐藏软键盘。

• none (默认值)，拖拽不会隐藏软键盘。

• on-drag 当拖拽开始的时候隐藏软键盘。

onDrawerClose function

每当导航视图（抽屉）被关闭之后调用此回调函数。

onDrawerOpen function

每当导航视图（抽屉）被打开之后调用此回调函数。

onDrawerSlide function

每当导航视图（抽屉）产生交互的时候调用此回调函数。

onDrawerStateChanged function

每当抽屉的状态变化时调用此回调函数。抽屉可以有3种状态：

• idle（空闲），表示现在导航条上没有任何正在进行的交互。

• dragging（拖拽中），表示用户正在与导航条进行交互。

• settling（停靠中），表示用户刚刚结束与导航条的交互，导航条正在结束打开或者关闭的动画。

/**
 * Created by Administrator on 2016/9/6.
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    DrawerLayoutAndroid,
    Text,
} from 'react-native';

class DrawLayoutAndroidG extends Component {
    render() {
        return (

            <DrawerLayoutAndroid
                //宽度
                drawerWidth={300}
                //从左侧出
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                //侧滑View视图
                renderNavigationView={this.navigationView}
                //打开是调用
                onDrawerOpen={()=> this.onDrawerOpen()}
                //关闭时调用
                onDrawerClose={()=> this.onDrawerClose()}
            >
                <View style={{flex: 1, alignItems: 'center'}}>
                    <Text
                        style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
                </View>

            </DrawerLayoutAndroid>

        )
    }

    navigationView() {
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!
                </Text>
            </View>
        )
    }

    onDrawerOpen() {
        alert('open')
    }
    onDrawerClose() {
        alert('close')
    }

}
module.exports = DrawLayoutAndroidG;