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屬性不熟悉的看這裡—

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