React Native学习之DrawerLayoutAndroid组件

封装了平台DrawerLayout（仅限安卓平台）的React组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且DrawerLayoutAndroid的直接子视图会成为主视图（用于放置你的内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。

DrawerLayoutAndroid组件的属性

• drawerPosition：DrawerLayoutAndroid.positions.Right 左右 默认左
• drawerWidth：指定抽屉的宽度，也就是从屏幕边缘拖进的视图的宽度

DrawerLayoutAndroid组件的方法

• onDrawerClose
• onDrawerOpen
• onDrawerSlide：每当导航视图（抽屉）产生交互的时候调用此回调函数
• onDrawerStateChanged：idle（空闲） dragging（拖拽中） settling（停靠中）
• renderNavigationView：渲染一个可以从屏幕一边拖入的导航视图

DrawerLayoutAndroid组件的模式

drawerLockMode：设置抽屉的锁定模式 有三种模式：

• unlocked (默认值)，意味着此时抽屉可以响应打开和关闭的手势操作
• locked-closed，意味着此时抽屉将保持关闭，不可用手势打开。
• locked-open，意味着此时抽屉将保持打开，不可用手势关闭。

无论抽屉处于那种状态，都仍然可以调用openDrawer/closeDrawer这两个方法打开和关闭

源码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

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

class RNAPP extends Component {
    render() {
        var navigationView = (
            <View style={{flex: 1, backgroundColor: '#ff0'}}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>我是抽屉!</Text>
            </View>
        );

        return (
            <DrawerLayoutAndroid
                drawerWidth={100}
                drawerPosition={DrawerLayoutAndroid.positions.Right}
                renderNavigationView={() => navigationView}
                >

                <View style={{flex: 1, alignItems: 'center'}}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>React Native World!</Text>
                </View>
            </DrawerLayoutAndroid>
        );
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1,
    },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);