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 为主页面视图 , 是抽屉关闭时页面上展示的内容 .

组件的属性

demo代码

新建项目,安装好 react-native-side-menu库 , 替换APP.js中的内容运行即可

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,
    },
});

react-native-side-menu库链接