native react 二级菜单_RN-常用第三方组件之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=

return (

menu={menu}

//menu={

isOpen={this.state.isOpen}

onChange={(isOpen)=>{

this.setState({

isOpen:isOpen,

})

}}

menuPosition={'left'}//侧边栏是左边还是右边

openMenuOffset={0.25*width}//侧边栏的宽度

edgeHitWidth={200}//手指拖动可以打开侧边栏的距离(距离侧边栏)

>

Welcome to React Native!

this.SelectToOpenLeftSideMenu() } >

点击打开侧边栏

);

}

}

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 (

{

this.selectSideMenu();

}}>

点击关闭侧边栏

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#ff000f',

justifyContent:'center',

alignItems:'center',

},

});

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

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

menu.gif

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