react-native-drawer

1. 安装

yarn add react-native-drawer -S
或
npm install react-native-drawer -S

2. 使用

2.1 Home组件

import React, {Component } from 'react';
import {
    StyleSheet,
    ScrollView,
    TouchableOpacity,
} from 'react-native';
import {
    Text
} from 'native-base';
import Drawer from 'react-native-drawer'
// Drawer组件
import ControlPanel from '../component/ControlPanel';

class Home extends Component{
    constructor(props) {
        super(props);
        this.state = {
            drawerOpen: false,
            drawerDisabled: false,
        };
    }

    closeDrawer = () => {
        this._drawer.close()
    };
    openDrawer = () => {
        this._drawer.open()
    };

    render() {
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                // type: 一共是3种（displace,overlay,static）, 用static就好啦，static让人感觉更舒适一些
                type="static"
                // Drawer 展开区域组件
                content={
                    <ControlPanel closeDrawer={this.closeDrawer} />
                }
                // 响应区域双击可以打开抽屉
                acceptDoubleTap
                // styles 和 tweenHandler是设置向左拉后主内容区的颜色，相当于给主内容区加了一个遮罩
                styles={{
                    mainOverlay: {
                        backgroundColor: 'black',
                        opacity: 0,
                    },
                }}
                tweenHandler={(ratio) => ({
                    mainOverlay: {
                        opacity: ratio / 2,
                    }
                })}
                // drawer打开后调用的函数
                onOpen={() => {
                    this.setState({drawerOpen: true});
                }}
                // drawer关闭后调用的函数
                onClose={() => {
                    this.setState({drawerOpen: false});
                }}

                captureGestures={false}
                // 打开/关闭 Drawer所需要的时间
                tweenDuration={100}
                // 触发抽屉打开/关闭必须经过的屏幕宽度比例
                panThreshold={0.08}
                disabled={this.state.drawerDisabled}
                // Drawer打开后有边界距离屏幕右边界的距离
                openDrawerOffset={(viewport) => {
                    return 100;
                }}
                // 拉开抽屉的响应区域
                panOpenMask={0.2}
                // 如果为true, 则尝试仅处理水平滑动
                negotiatePan
            >
                {/*主内容区*/}
                <ScrollView style={styles.container}>
                    <Text>MAIN</Text>
                </ScrollView>
            </Drawer>

        );
    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#7699dd',
        padding: 20,
        flex: 1,
    },
});

export default Home;

2.2 Drawer组件 <ControlPanel/>

// 此组件可根据具体需求自定义
import React, {Component} from 'react'
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native'

export default class ControlPanel extends Component {
    render() {
        let {closeDrawer} = this.props
        return (
            <ScrollView style={styles.container}>
                <View style={{marginTop: 40}}>
                    <Text style={styles.controlText}>Control Panel</Text>
                    <TouchableOpacity style={styles.button} onPress={closeDrawer}>
                        <Text>Close Drawer</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#d0d0d0',
    },
    controlText: {
        color: 'white',
    },
    button: {
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: 'black',
        padding: 10,
    }
})

2.3 结果

向右滑动前

向右滑动后