【React Native】React Native中DrawerLayoutAndroid通过点击实现展开和关闭

　　React Native中，DrawerLayoutAndroid组件与Android原生开发中的DrawerLayout一样实现侧滑菜单的效果。通过手势左右滑动实现拉出与退出的操作，但是需要通过点击图标或者文字就能弹出侧滑菜单该怎么做呢？

　　这时就需要知道DrawerLayoutAndroid在展开和关闭时所调用的具体方法了，这个可以通过源码知道，点开DrawerLayoutAndroid.android.js的源码，发现展开侧滑菜单的方法是这样：

 /**   * Opens the drawer.   */  openDrawer: function() {    UIManager.dispatchViewManagerCommand(      this._getDrawerLayoutHandle(),      UIManager.AndroidDrawerLayout.Commands.openDrawer,      null    );  },

同样也有关闭时的closeDrawer方法。

　 所以，在自己的项目中，只需要拿到DrawerLayoutAndroid组件，直接或间接调用openDrawer方法即可实现展开。
　　
那么具体的操作就是下面这样：

1–在DrawerLayoutAndroid中添加ref属性。

　　添加ref属性即可实现对组件的引用。这里需要获取到DrawerLayoutAndroid的引用来调用展开关闭的方法。关于ref属性不熟悉的看这里—对组件的引用(refs)。
　　（这里对DrawerLayoutAndroid的引用为drawer）

 <DrawerLayoutAndroid                ref={(drawer) => {                    this.drawer = drawer;                }}                ......

2–定义展开关闭侧滑菜单的方法。

　根据上面定义的DrawerLayoutAndroid的引用drawer，来调用源码中openDrawer和closeDrawer方法 。作为自己当前项目展开关闭侧滑菜单的方法。

 //打开侧滑栏    onPenLeftDrawer() {        this.drawer.openDrawer();    }    closeLeftDrawer() {        this.drawer.closeDrawer();    }

3–onPress将点击与侧滑菜单的展开和关闭联系起来

　定义用于点击展开的按钮TouchableHighlight，其中的onPress点击函数就是调用自己定义的侧滑菜单的展开方函数。于是，当TouchableHighlight被点击时，调用onPenLeftDrawer展开方法。使侧滑菜单展开。

<TouchableHighlight      underlayColor="rgb(210, 230, 255)"      activeOpacity={0.5}      style={styles.touchable}      onPress={() => this.onPenLeftDrawer()}      //onPress={this.onPenLeftDrawer.bind(this)} >    <Text style={{fontSize: 16, justifyContent: 'center'}}>点击我弹出</Text></TouchableHighlight>

　由于展开侧滑菜单之后，手势操作或者点击侧滑菜单之外的部分也能使其关闭，所以通过点击使其关闭意义并不大。但是实现方式与上面一样，在侧滑菜单的View中，添加点击控件，绑定closeLeftDrawer关闭方法，就可以用通过点击来关闭。

最终效果：

　　
以上效果完整代码(项目名Test13)：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    PixelRatio,    DrawerLayoutAndroid,    TouchableHighlight,} from 'react-native';class Test13 extends Component {    //打开侧滑栏    onPenLeftDrawer() {        this.drawer.openDrawer();    }    closeLeftDrawer() {        this.drawer.closeDrawer();    }    render() {        var navigationView = (            <View style={{flex: 1, backgroundColor: 'white'}}>                <Text style={{margin: 10, color: '#333', fontSize: 15, textAlign: 'center'}}>侧滑菜单</Text>                <Text                    style={{marginTop: 10, marginLeft: 20, color: '#666', fontSize: 15, textAlign: 'left'}}>账户设置</Text>                <Text                    style={{marginTop: 10, marginLeft: 20, color: '#666', fontSize: 15, textAlign: 'left'}}>支付中心</Text>                <TouchableHighlight                    underlayColor="rgb(210, 230, 255)"                    activeOpacity={0.5}                    style={[styles.touchable,{marginTop: 280}]}                    onPress={this.closeLeftDrawer.bind(this)}                >                    <Text style={{fontSize: 16, justifyContent: 'center'}}>点击关闭侧滑菜单</Text>                </TouchableHighlight>            </View>        );        return (            <DrawerLayoutAndroid                ref={(drawer) => {                    this.drawer = drawer;                }}                drawerWidth={250}                drawerPosition={DrawerLayoutAndroid.positions.Left}                renderNavigationView={() => navigationView}>                <View style={{flex: 1,}}>                    <TouchableHighlight                        underlayColor="rgb(210, 230, 255)"                        activeOpacity={0.5}                        style={styles.touchable}                        onPress={() => this.onPenLeftDrawer()}                        //onPress={this.onPenLeftDrawer.bind(this)}                    >                        <Text style={{fontSize: 16, justifyContent: 'center'}}>点击我弹出</Text>                    </TouchableHighlight>                </View>            </DrawerLayoutAndroid>        );    }}const styles = StyleSheet.create({    button: {        backgroundColor: 'white',        padding: 15,        borderBottomWidth: StyleSheet.hairlineWidth,        borderBottomColor: '#CDCDCD',    },    touchable: {        backgroundColor: '#fff',        padding: 15,        borderBottomWidth: StyleSheet.hairlineWidth,        borderBottomColor: '#CDCDCD',    }});AppRegistry.registerComponent('Test13', () => Test13);