側(cè)邊欄恋博，支持左讥脐、右

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

導(dǎo)入：

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

使用同樣簡(jiǎn)單，查看github即可硅则，下面貼一下簡(jiǎn)單使用的代碼

既然是側(cè)欄，肯定有一個(gè)當(dāng)前頁(yè)，有一個(gè)側(cè)欄頁(yè)

當(dāng)前頁(yè)：

/**
 * 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);
    }


    //點(diǎn)擊側(cè)邊欄的按鈕萧锉，回調(diào)此函數(shù)，關(guān)閉menu
    SelectMenuItemCallBack(){
        this.setState({
            isOpen:!this.state.isOpen,
        })
    }

    //點(diǎn)擊打開側(cè)邊欄
    SelectToOpenLeftSideMenu(){
        this.setState({
            isOpen:true,
        })
    }


    render() {

        //初始化menu述寡，傳遞回調(diào)函數(shù)
        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'}//側(cè)邊欄是左邊還是右邊
            openMenuOffset={0.25*width}//側(cè)邊欄的寬度
            edgeHitWidth={200}//手指拖動(dòng)可以打開側(cè)邊欄的距離（距離側(cè)邊欄）

            >

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


                    <TouchableOpacity onPress={() => this.SelectToOpenLeftSideMenu() } >
                        <Text>點(diǎn)擊打開側(cè)邊欄</Text>
                    </TouchableOpacity>


                </View>



            </SideMenu>



        );
    }
}

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

});

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

側(cè)欄：

/**
 * 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);
    }


    //函數(shù)回調(diào)
    selectSideMenu(){
        this.props.onSelectMenuItem();
    }

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

                    <Text>點(diǎn)擊關(guān)閉側(cè)邊欄</Text>

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

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

});

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

很簡(jiǎn)單的調(diào)用柿隙，屬性寫的都是常用的，文檔上寫的更多鲫凶，需要其他的屬性支持翻看文檔

menu.gif

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

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