react-native-redux-router-simple

react native的路由组件,结合redux实现。它提供路由配置、路由跳转、顶部导航栏、底栏功能。
支持onEnter配置,可以在路由跳转前做登录授权验证决定是否重定向(replace)到登录页。

#关于该组件
组件是react-native-router-redux的简化版(去掉Schema配置,仅支持单个TabRoute配置),并在它的基础上增加了以下功能:
1.Router标签下除了定义Route及TabRoute标签外,还可以添加其它全局标签(View,Text,自定义组件如全局Loading组件等)
2.每个路由页可配置navbar或tabbar是否显示
3.Router组件提供onEnter配置,可用于做跳转前置控制(登录拦截)

#安装
``
npm install --save react-native-redux-router-simple
`

#使用文档
请参考react-native-router-redux文档及example示例获取基础用法(路由跳转方法与它保持一致),其它如onEnter使用请参考下方示例。

#示例
`
'use strict';

import React, { Component } from 'react';

import { Navigator, StyleSheet, Image, View, Text, TouchableOpacity } from 'react-native';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import Loading from '../components/loading';

import Hello from '../containers/hello';
import OrderDetail from '../containers/order-detail';
import Orders from '../containers/orders';
import Setting from '../containers/setting';

import { Router, Route, TabRoute, actions as routerActions } from '../components/router';

const mapStateToProps = state => ({
router: state.router, // 一定要暴露出来(先在reducer中引入,请参考react-native-router-redux的示例中的reducer声明引用)
global: state.global
});

const mapDispatchToProps = (dispatch) => ({
// actions一定要暴露出来
actions: bindActionCreators({
...routerActions,
}, dispatch),
dispatch
});

const assets = {
'setting_active': require('../assets/img/setting_active.png'),
'setting': require('../assets/img/setting.png'),
'order_active': require('../assets/img/order_active.png'),
'order': require('../assets/img/order.png')
};

class App extends Component {
// 参数说明:
// route -- 当前即将进入的页面路由对象
// routes -- 所有路由对象组成的列表
// 返回说明: 返回路由对象, 组件根据返回路由replace到对应的
// 页面(并会在跳转后的页面中注入属性: targetRoute=route, 用于登录成功后可回到route页)。
handleRouteEnter (route, routes) {
// 可作登录拦截
// 此处仅判断路由是orderDetail页时,跳转至hello页
if (route.name === 'orderDetail') {
return routes['hello'];
}

return route;
}

// hideNavBar -- 是否不显示navbar
// hideTabBar -- 是否不显示tabbar
// Router的children中可添加多个全局组件显示,此处添加了Loading组件用来显示全局加载状态条。
render() {
const { fetchCount } = this.props.global;

return (









);
}
}

let ConnectApp = connect(mapStateToProps, mapDispatchToProps)(App);

export default ConnectApp;

``