ReactNative 抽屉组件 侧滑栏 react-native-side-menu

示例图:

安装

npm install react-native-side-menu --save

使用

引入组件

import SideMenu from 'react-native-side-menu';

使用组件:

render() {
        const menu = <Text style={{marginTop: 22}}>aaa</Text>;
        return (

            <SideMenu
                menu={menu}                    //抽屉内的组件
            >
                <View style={styles.container}>
                    <Text style={styles.welcome} onPress={() => {
                        this.setState({
                            isOpen: true
                        })
                    }}>
                        Open Draw!
                    </Text>
                    <Text style={styles.instructions}>
                        To get started, edit App.js
                    </Text>

                </View>
            </SideMenu>

        );

menu 为 抽屉内部的组件 , 展示在抽屉上的内容 .
ContentView 为主页面视图 , 是抽屉关闭时页面上展示的内容 .

组件的属性

属性	默认值	类型	描述
menu	空的View	React.Component	一个组件
isOpen	false	Boolean	抽屉打开/关闭
openMenuOffset	屏幕宽度的2/3	Number	抽屉打开时的宽度
hiddenMenuOffset	none	Number	抽屉关闭状态时,显示多少宽度 默认0 抽屉完全隐藏
edgeHitWidth	none	Number	距离屏幕多少距离可以滑出抽屉,默认60
toleranceX	none	Number	X 轴的偏移量
toleranceY	none	Number	Y 轴的偏移量
disableGestures	false	Bool	是否禁用手势滑动抽屉 默认false 允许手势滑动
onStartShouldSetResponderCapture	none	Function	Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details
onChange	none	Function	抽屉状态变化的监听函数
onMove	none	Function	抽屉移动时的监听函数 , 参数为抽屉拉出来的距离. 抽屉在左侧时参数为正,右侧则为负
onSliding	none	Function	Callback when menu is sliding. It returns a decimal from 0 to 1 which represents the percentage of menu offset between hiddenMenuOffset and openMenuOffset.
menuPosition	left	String	抽屉在左侧还是右侧 参数为 ‘left’/’right’
animationFunction	none	(Function -> Object)	Function that accept 2 arguments (prop, value) and return an object: - prop you should use at the place you specify parameter to animate - value you should use to specify the final value of prop
animationStyle	none	(Function -> Object)	Function that accept 1 argument (value) and return an object: - value you should use at the place you need current value of animated parameter (left offset of content view)
bounceBackOnOverdraw	true	boolean	when true, content view will bounce back to openMenuOffset when dragged further
autoClosing	true	boolean	如果为true 一旦有事件发生抽屉就会关闭

以上为博主实践并根据源文档总结的. 
英文未翻译的为没有确定的,欢迎大神补充.

demo代码

最后送上本人使用时的demo代码
新建项目,安装好 react-native-side-menu库 , 替换APP.js中的内容运行即可

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

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
const {width, heihgt} = Dimensions.get('window');
type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        }
    }

    render() {
        const menu = <Text style={{marginTop: 22}} onPress={() => alert('点击了aaa')}>aaa</Text>;
        return (

            <SideMenu
                menu={menu}                    //抽屉内的组件
                isOpen={this.state.isOpen}     //抽屉打开/关闭
                openMenuOffset={width / 2}     //抽屉的宽度
                hiddenMenuOffset={20}          //抽屉关闭状态时,显示多少宽度 默认0 抽屉完全隐藏
                edgeHitWidth={60}              //距离屏幕多少距离可以滑出抽屉,默认60
                disableGestures={false}        //是否禁用手势滑动抽屉 默认false 允许手势滑动
                /*onStartShouldSetResponderCapture={
                    () => console.log('开始滑动')}*/
                onChange={                   //抽屉状态变化的监听函数
                    (isOpen) => {
                        isOpen ? console.log('抽屉当前状态为开着')
                            :
                            console.log('抽屉当前状态为关着')

                    }}

                onMove={                     //抽屉移动时的监听函数 , 参数为抽屉拉出来的距离 抽屉在左侧时参数为正,右侧则为负
                    (marginLeft) => {
                        console.log(marginLeft)
                    }}

                menuPosition={'left'}     //抽屉在左侧还是右侧
                autoClosing={false}         //默认为true 如果为true 一有事件发生抽屉就会关闭
            >
                <View style={styles.container}>
                    <Text style={styles.welcome} onPress={() => {
                        this.setState({
                            isOpen: true
                        })
                    }}>
                        Open Draw!
                    </Text>
                    <Text style={styles.instructions}>
                        To get started, edit App.js
                    </Text>
                    <Text style={styles.instructions}>
                        {instructions}
                    </Text>
                </View>
            </SideMenu>

        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 22
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

该库的github地址