react native之侧边栏(react-native-side-menu)

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;