react-native-sf-drawer

侧边栏

安装

npm install react-native-sf-drawer

Props

parameter	type	required	description	default
drawerWidthRate	number	no	侧边栏暂屏幕宽度的比例（0.0-1.0）	0.7
drawerHeight	number	no	侧边栏高度	null
drawerDirection	string	no	侧边栏的方向（'left','right'）	'left'
drawerTop	number	no	侧边栏距离上方的高度	0
backgroundColor	string	no	背景颜色	'rgba(0,0,0,0.7)'
onOpen	func	no	开始显示	null
onClose	func	no	开始关闭	null

Methods

Methods	Params	Param Types	description	Example
show	null	null	显示侧边栏
hide	null	null	隐藏侧边栏

例子

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
    Dimensions,
    TouchableOpacity
} from 'react-native';

import SFDrawer from "react-native-sf-drawer"
var dw = Dimensions.get('window').width;
var dh = Dimensions.get('window').height;
export default class App extends Component {
  click = () => {
    this.refs.drawer.show()

  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.click}>
          <View style={{
            width:dw,
            height:150,
            backgroundColor:'red'
          }}></View>
        </TouchableOpacity>

        <SFDrawer
            ref="drawer"

          drawerDirection={'left'}
        >
          <View style={{
            height:dh,
            backgroundColor:'green'
          }}></View>
        </SFDrawer>
      </View>
    );
  }
}