react-native 路由与菜单demo

路由使用: react-native-router-flux
菜单使用: react-native-side-menu

---

1. 效果

初始进入页面

点击上方bar后

2. 组件

1. 菜单组件

简单定义了一个菜单列表 列表中每一个item的点击都会重新刷新整个界面 （使用父组件传递的方法）

import React, {
     Component} from 'react';
import {
      FlatList } from 'react-native-gesture-handler';
import {
     View, Text, TouchableHighlight, StyleSheet} from 'react-native';

const menuList = [
    {
     
        "id": "home",
        "name": "首页",
        "routeKey": "fir"
    },
    {
     
        "id": "pwd",
        "name": "密码管理",
        "routeKey": "pwd"
    },
    {
     
        "id": "notify_test",
        "name": "推送测试",
        "routeKey": "notify_test",
    }
];

/**
 *   item.id}/>
 */
class MyMenu extends Component {
     

    constructor(props) {
     
        super(props);
        this.renderOneMenu = this.renderOneMenu.bind(this); // 需要bind一下 不然函数内访问this存在问题
    }

    render() {
     

        return (
            <View>
                <Text style={
     styles.head}>Menu</Text>
            <FlatList data={
     menuList} renderItem={
     this.renderOneMenu}
            keyExtractor = {
     item => item.id}/>
            </View>
        )
    }

    renderOneMenu({
     item}) {
     
        let _this = this;
        return (
            
            <View>
                <TouchableHighlight onPress = {
     () => _this.props.menuSelected(item)}>
                <Text style={
     styles.item}> {
     item.name} </Text>
                </TouchableHighlight>
            </View>
        )
    }
}

const styles = StyleSheet.create({
     
    head: {
     
        fontSize: 20,
        color: 'blue',
    },
    item: {
     
        fontSize: 16,
        fontWeight: '300',
        paddingTop: 10,
        left: 15
    }, 
})

export default MyMenu;

2. 主页面组件

包含菜单和路由
状态中定了初始状态的route

（部分组件代码未贴出 ）

import React, {
     Component} from 'react';
import Fir from "./srcjs/na/ui/fir";
import Pwd from "./srcjs/na/ui/Pwd";
import MyMenu from './srcjs/na/menu';
import MyBar from './srcjs/na/mybar';
import NotifyTest from './srcjs/na/ui/noti_test';

import {
     
  Router,
  Stack,
  Scene,
  Actions,
} from 'react-native-router-flux';
import {
     StyleSheet} from 'react-native';
import SideMenu from 'react-native-side-menu';

class Main extends Component {
     

  constructor(props) {
     
    super(props);
    this.state = {
     
      menuOpen: false,
      routeKey: 'pwd',
    }
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
    this.menuSelected = this.menuSelected.bind(this);
    window.openMenu = this.openMenu;
    window.switchTo = this.switchTo;
    window.closeMenu = this.closeMenu;
  }

  switchTo(key) {
     
    Actions.push(key);
  }

  closeMenu() {
     
    this.setState({
     
      menuOpen: false,
    })
  }

  openMenu() {
     
    this.setState({
     
      menuOpen: true,
    })
  }

  menuSelected(item) {
     
    this.setState({
     
      menuOpen: false,
      routeKey: item.routeKey,
    });
  }

  render() {
     
    const menu = <MyMenu menuSelected={
     this.menuSelected} />;
    return (
      
      <SideMenu menu={
     menu} width={
     10} isOpen={
     this.state.menuOpen}>
      <Router>
        <Stack key="root">
          <Scene key="fir" initial={
     'fir' == this.state.routeKey} navBar={
     MyBar}  back={
     false} component={
     Fir} title="fir" titleStyle={
     styles.routeTitle}></Scene>
          <Scene key="pwd" initial={
     'pwd' == this.state.routeKey} navBar={
     MyBar}  back={
     false} component={
     Pwd} title="密码" titleStyle={
     styles.routeTitle}></Scene>
          <Scene key="notify_test" initial={
     'notify_test' == this.state.routeKey} navBar={
     MyBar}  back={
     false} component={
     NotifyTest}></Scene>
        </Stack> 
      </Router>
      </SideMenu>
    
    )
  }
}

const styles = StyleSheet.create({
     
  routeTitle: {
     
    justifyContent: 'center',
    flex: 1,
    color: 'red',
  }
})

export default Main;