React-native之开源侧边栏组件react-native-side-menu（18）

一. 简介

开发项目中可能会有用到侧边栏，今天说一下react-native-side-menu
.github地址:https://github.com/react-native-community/react-native-side-menu

二.使用

导入

项目根目录下使用命令行 npm install react-native-side-menu --save

项目代码中import

import SideMenu from 'react-native-side-menu';
示例
const uri_image_menu = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/17351665220160605093956066.png'; class HomeUI extends Component { constructor(props) { super(props);//这一句不能省略，照抄即可 this.state={ // selectedTab:'home' isOpen:false, selectedItem:'About' } } toggle(){ this.setState({ isOpen:!this.state.isOpen, }); } onMenuItemSelected = (item) =>{ this.setState({ isOpen: false , selectedItem:item , }); } updateMenuState(isOpen){ this.setState({ isOpen:isOpen, }) } render(){ const menu =

; return ( this.updateMenuState(isOpen)}> 当前选中的菜单是: {this.state.selectedItem} this.toggle()}> ); } } class Button extends Component{ _handlePress(e){ if(this.props.onPress){ this.props.onPress(e); } } render(){ return ( {this.props.children} ); } } const styles = StyleSheet.create({ flex:{ flex:1, }, center:{ justifyContent:'center', alignItems:'center' }, img: { width: 40, height: 33, }, button:{ position:'absolute', padding:20, top:20 }, container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
侧边栏菜单单独拿出来写在了一个js文件中 ，在主界面中导入
import Menu from './Menu.js';
Menu.js代码
const window = Dimensions.get('window'); const AvatarUri = "http://cdn-qn0.jianshu.io/assets/default_avatar/3-9a2bcc21a5d89e21dafc73b39dc5f582.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"; export default class Menu extends Component{ static propTypes={ onItemSelected:React.PropTypes.func.isRequired, }; render (){ return ( 飞奔的小马 this.props.onItemSelected('我的收藏')}>我的收藏 this.props.onItemSelected('我的文章')}>我的文章 ); } } const styles = StyleSheet.create({ menu:{ flex:1, width:window.width, height:window.height, backgroundColor:'gray', padding:20 }, avatarContainer:{ marginBottom:20, marginTop:20 }, avatar:{ width:50, height:50, borderRadius:20, }, nickName:{ position:'absolute', left:70, top:20, fontSize:18, }, item:{ fontSize:16, fontWeight:'300', paddingTop:10, } });

效果

side_01.png

side_02.png

点击左上角按钮或者从左边沿向右拽都能将侧边栏拉出来
同样点击左上角按钮或点击主界面空白处都能掩藏侧边栏。
背景色可以按需求调节。