ReactNative开发之DrawerLayoutAndroid组件的使用

今天记录的是ReactNative开发中DrawerLayoutAndroid组件的使用方法，DrawerLayoutAndroid即侧滑菜单，如下图所示：

当手指从屏幕左侧向右滑动时，即出现上图所示的侧滑菜单
如果要使用Android原生代码来实现这个侧滑菜单，估计要不少代码量吧，但是如果用ReactNative来实现该侧滑菜单，只需要很少的代码即可完成，下面就一步步实现这个侧滑菜单。

实现侧滑菜单布局

侧滑菜单的布局很简单，就是几个垂直排列的Text组件，下面直接上代码(./view/DrawerLayoutMenu.js)：

import React from 'react';
import {
    View,TouchableOpacity,Text,PixelRatio,ToastAndroid
} from 'react-native';

export default class DrawerLayoutMenu extends React.Component {
    constructor(props) {
        super(props);

        /** 第一个菜单项的文本从这里取 */
        this.state = {
            text: '点我关闭'
        }
    }
    render() {
        var menuItems = [];
        /** onPress属性为TouchableOpacity组件设置了一个点击事件的处理函数，activeOpacity设置组件被点击时的透明度 */
        menuItems.push(
            <TouchableOpacity key={0} onPress={this.handleMenuItemClicked.bind(this)} activeOpacity={0.6} style={styles.menuItemContainer}>
                <Text style={styles.menuItem}>{this.state.text}</Text>
            </TouchableOpacity>
        );
        /** 通过for循环添加几个菜单项 */
        for(var i = 1; i <= 10; i++) {
            menuItems.push(
                <TouchableOpacity activeOpacity={0.6} style={styles.menuItemContainer} key={i}>
                    <Text style={styles.menuItem}>菜单{i}</Text>
                </TouchableOpacity>
            );
        }
        return (
            <View style={styles.container}>
                {menuItems}
            </View>
        );
    }
    /** 第一个菜单项的点击事件处理函数 */
    handleMenuItemClicked(event) {
        //注意this.setState()是异步的，设置state成功后才会回调第二个参数中的方法
        this.setState({
            text: 'Hello World!'
        },function() {
            this.props.drawer.closeDrawer();
        });
    }
}

/** 样式，可以直接使用{}定义一个样式对象，也可以通过StyleSheet.create()创建一个样式对象 */
const styles = {
    container: {
        flex: 1,},menuItemContainer: {
        backgroundColor: '#ECECEC',justifyContent: 'center',height: 50,paddingLeft: 10,marginTop: 1 / PixelRatio.get(),menuItem: {
        fontSize: 18,color: '#000000',}
};

下面说一下以上代码中应该注意的地方：

• TouchableOpacity组件代表一个可点击的容器组件，该组件可以响应点击事件，并且在点击时透明度会发生改变（前提是设置了该组件的activeOpacity属性），通过透明度的变化让点击事件更直观，关于该组件的使用方法，可以参考官方文档（http://facebook.github.io/react-native/releases/0.35/docs/touchableopacity.html），这里不详细说明。
• PixelRatio是ReactNative提供的一个API，可以获取当前设备的屏幕信息，在这里我们通过使用marginTop: 1 / PixelRatio.get()来获取当前设备最细的一条线，PixelRatio的文档地址为：http://facebook.github.io/react-native/releases/0.35/docs/pixelratio.html
• ToastAndroid组件封装了Android原生的Toast，使用方法也很简单：ToastAndroid.show(msg,ToastAndroid.SHORT)，主要就是两个参数，第一个参数为要显示的字符串信息，第二个参数为Toast显示的时间，可选ToastAndroid.SHORT或者ToastAndroid.LONG，文档地址为：http://facebook.github.io/react-native/releases/0.35/docs/toastandroid.html
• 关于组件的样式设置，主要是通过style属性来指定一个样式的，ReactNative中的样式跟ReactJS、CSS中的样式非常相似，可以通过这篇博客详细了解ReactNative的样式和布局：http://www.52php.cn/article/p-alxwtsfx-hw.html

编写DrawerLayoutAndroid相关的代码

下面直接上代码(index.android.js)：

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

import DrawerLayoutMenu from './view/DrawerLayoutMenu'

export default class TestDrawerLayoutAndroid extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    var navigationView = (<DrawerLayoutMenu />);  // 侧滑菜单的视图
    var screenWidth = Dimensions.get('window').width;  // 获取屏幕的宽度
    var drawerLayoutAndroid = (
      <DrawerLayoutAndroid
        style={styles.drawerStyle}  /** 设置样式 */
        onDrawerOpen={this._handleDrawerOpen.bind(this)}  /** 设置Drawer打开时的回调函数 */
        drawerWidth={screenWidth * 2 / 3}  /** 这里是将侧滑菜单的宽度设置为屏幕宽度的2/3 */
        drawerPosition={DrawerLayoutAndroid.positions.Left} /** 设置Drawer的位置，这里是设置在屏幕左侧 */
        ref="drawer"  /** 设置ref属性，便于通过this.refs.drawer获取到DrawerLaytoutAndroid这个组件 */
        renderNavigationView={() => (<DrawerLayoutMenu drawer={this.refs.drawer}/>)}/** renderNavigationView这个属性的属性值为一个function，通过这个function渲染侧滑菜单的视图 */
        >  
        <View style={styles.textContainer}>
          <Text style={[styles.textStyle,styles.textLarge]}/** 当一个组件需要使用多个style样式时，需要用[]将样式括起来 */>厉害了</Text> 
          <Text style={[styles.textStyle,styles.textLarge]}>World 哥!</Text>
          <Text style={[styles.textStyle,styles.textSmall]}>侧滑出现菜单</Text>
        </View>
      </DrawerLayoutAndroid>
    );
    return drawerLayoutAndroid; /** 返回值为要渲染的视图，注意这个视图必须被包含在一个标签内，而不能是几个标签 */
  }
  /** 当Drawer控件打开时，会自动调用该方法 */
  _handleDrawerOpen() { 
    //使用ToastAndroid组件弹出一个原生的Toast
    ToastAndroid.show("open drawer",ToastAndroid.SHORT);
  }
}

/** 创建样式对象 */
const styles = StyleSheet.create({
  drawerStyle: {
    backgroundColor: '#6699FF'
  },textContainer: {
    flex: 1,alignItems: 'center',flexDirection: 'column',textStyle: {
    margin: 10,color: 'white',textAlign: 'center'
  },textSmall: {
    fontSize: 15,textLarge: {
    fontSize: 35,}
})

/** 注册组件TestDrawerLayoutAndroid */
AppRegistry.registerComponent('PocketKitchen',() => TestDrawerLayoutAndroid);

上面的代码已有比较详细的注释，下面需要说明几点注意事项：

• render()方法的返回值必须是被一个标签包含的组件，而不能有几个标签并排，下面是一个正确的render()方法的返回值：

render() {
    return (
        <View></View>
    );
}

下面是错误的render()方法的返回值：

render() {
    return (
        <Text>...</Text>
        <Text>...</Text>
    );
}

• 通过import DrawerLayoutMenu from './view/DrawerLayoutMenu' 来导入我们编写的侧滑菜单视图
• 为了实现点击侧滑菜单的第一项来关闭侧滑菜单这个功能，必须将DrawerLayoutAndroid这个组件传给我们编写的DrawerLayoutMenu组件，但是怎么传递组件呢？这里的方法是，为DrawerLayoutAndroid组件设置ref属性，然后在DrawerLayoutMenu组件初始化的时候，传一个名为drawer的属性，属性值为this.refs.drawer，即我们通过this.refs.drawer来获取DrawerLayoutAndroid组件的引用，然后通过props将这个引用传递给子组件，这样就可以在子组件中拿到DrawerLayoutAndroid组件的引用并调用该组件的closeDrawer()方法来关闭侧滑菜单了。