【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);