react native之侧边栏(react-native-side-menu)
npm install react-native-sid-menu --save // 安装依赖并将依赖信息保存到package.json中
https://github.com/react-native-community/react-native-side-menu //GitHub地址
import SideMenu from "react-native-side-menu";//导入侧边栏. 注意这里要import,官方文档未修改过来
/** * * 侧边栏 * */ import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View,TouchableHighlight } from 'react-native'; import SideMenu from "react-native-side-menu";//导入侧边栏 const Menu=require("./Menu");//侧边栏的具体内容 class SideMenuDemo extends Component { constructor(props){ super(props); this.state={ isOpen:false } } render() { //传了导航过去。其中this.props.navigator是入口页面传进来的 const menu = <Menu navigator={this.props.navigator}/>; return ( <SideMenu menu={menu} isOpen={this.state.isOpen} > <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started,edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+Control+Z for dev menu </Text> <TouchableHighlight style={styles.clickMeTry} onPress={()=>{ this.setState({isOpen:!this.state.isOpen}); }} > <Text style={styles.clickMEtryText}>点我试试</Text> </TouchableHighlight> </View> </SideMenu> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,clickMeTry:{ position:"absolute",top:50,left:30 },clickMEtryText:{ color:"red",fontSize:17 } }); module.exports = SideMenuDemo;