RN-常用第三方组件之react-native-side-men

侧边栏，支持左、右

地址：https://github.com/react-native-community/react-native-side-menu

导入：

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

使用同样简单，查看github即可，下面贴一下简单使用的代码

既然是侧栏，肯定有一个当前页，有一个侧栏页

当前页：

/**
 * Created by mymac on 2017/4/21.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions
} from 'react-native';

let {width,height} = Dimensions.get('window');

//npm install react-native-side-menu --save
//https://github.com/react-native-community/react-native-side-menu


import SideMenu from 'react-native-side-menu'
import Menu from './LeftMenu'

export default class LeftSideMenu extends Component {
    constructor(props){
        super(props);

        this.state={
            isOpen:false,
        }

        this.SelectMenuItemCallBack = this.SelectMenuItemCallBack.bind(this);
    }


    //点击侧边栏的按钮，回调此函数，关闭menu
    SelectMenuItemCallBack(){
        this.setState({
            isOpen:!this.state.isOpen,
        })
    }

    //点击打开侧边栏
    SelectToOpenLeftSideMenu(){
        this.setState({
            isOpen:true,
        })
    }


    render() {

        //初始化menu，传递回调函数
        const menu=<Menu onSelectMenuItem={this.SelectMenuItemCallBack}/>;

        return (
            <SideMenu
            menu={menu}
            //menu={<Menu onSelectMenuItem={this.SelectMenuItemCallBack}/>}//这样写也可以
            isOpen={this.state.isOpen}
            onChange={(isOpen)=>{
                this.setState({
                    isOpen:isOpen,
                })
            }}
            menuPosition={'left'}//侧边栏是左边还是右边
            openMenuOffset={0.25*width}//侧边栏的宽度
            edgeHitWidth={200}//手指拖动可以打开侧边栏的距离（距离侧边栏）

            >

                <View style={styles.container}>
                    <Text>
                        Welcome to React Native!
                    </Text>


                    <TouchableOpacity onPress={() => this.SelectToOpenLeftSideMenu() } >
                        <Text>点击打开侧边栏</Text>
                    </TouchableOpacity>


                </View>



            </SideMenu>



        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

});

AppRegistry.registerComponent('ThirdPartyToolTest', () => LeftSideMenu);

侧栏：

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

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

export default class LeftMenu extends Component {
    constructor(props){
        super(props);

        this.selectSideMenu = this.selectSideMenu.bind(this);
    }


    //函数回调
    selectSideMenu(){
        this.props.onSelectMenuItem();
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={()=>{
                    this.selectSideMenu();
                }}>

                    <Text>点击关闭侧边栏</Text>

                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ff000f',
        justifyContent:'center',
        alignItems:'center',
    },

});

AppRegistry.registerComponent('ThirdPartyToolTest', () => LeftMenu);

很简单的调用，属性写的都是常用的，文档上写的更多，需要其他的属性支持翻看文档

menu.gif

demo:https://github.com/chjwrr/ThirdPartyToolTest

DDBDBB7C-A4EA-4D92-9D72-A3FCB039FF2E.png