React Native 抽屉组件使用介绍

安装：

npm install native-cmos-drawer

参数：

Name | propType | default value | description --- | --- | --- | --- drawerLockMode | string | unlocked | 设置抽屉的锁定模式enum('unlocked', 'locked-closed', 'locked-open') drawerPosition | enum | DrawerConsts.DrawerPosition.Left | 指定抽屉可以从屏幕的哪一边滑入enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) drawerWidth | number | 0 | 指定抽屉的宽度 keyboardDismissMode | string | none | 指定在拖拽的过程中是否要隐藏软键盘enum('none', "on-drag") onDrawerClose | func | null | 每当导航视图（抽屉）被关闭之后调用此回调函数。 onDrawerOpen | func | null | 每当导航视图（抽屉）被打开之后调用此回调函数 onDrawerSlide | func | null | 每当导航视图（抽屉）产生交互的时候调用此回调函数。 onDrawerStateChanged | func | null | 每当抽屉的状态变化时调用此回调函数 renderNavigationView | func | null | 此方法用于渲染一个可以从屏幕一边拖入的导航视图。 distanceTop | number | 0 | 抽屉距离顶部 distanceBottom | number | 0 | 抽屉距离底部 setOverlayOpacity | number | 0.5 | 空白覆盖区域透明度设置 sideslipDistance | number | 40 | 可触发手势侧滑的距离设置

使用示例：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import DrawerLayout from './drawer';

export default class AppTest extends Component {
  render() {
    var navigationView = (
      <View style={{flex: 1, backgroundColor: '#000',opacity:0.5}}>
      <Text style={{margin: 10, fontSize: 15,color:"white", textAlign: 'left'}}>
      哈哈哈
      </Text>
    </View>
    );
    return (
      <DrawerLayout
        distanceTop={40}
        distanceBottom={100}
        drawerWidth={100}
        ref={drawer => {
          return (this.drawer = drawer);
        }}
        setOverlayOpacity = {0.2}
        drawerPosition={DrawerLayout.positions.Left}
        renderNavigationView={() => navigationView}>
        <TouchableHighlight style={{margin:40}} onPress={() => this.drawer.openDrawer()}>
          <Text>Open drawer</Text>
        </TouchableHighlight>
        <View style={{flex: 1, alignItems: 'center'}}>
          <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
          <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
        </View>
      </DrawerLayout>
    );
  }
}

AppRegistry.registerComponent('RNDrawerDemo', () => AppTest);

更新日志：

版本号 | 日期 | 说明 --- | --- | --- v0.0.3 | 2017.8.9 | 增加空白覆盖区域透明度设置setOverlayOpacity，去掉isOverlayOpacity属性 v0.0.4 | 2017.8.21 | 增加可触发手势侧滑的距离设置属性sideslipDistance