React-Native 统一 navigator 路由入口

https://github.com/yj1438/RN-...

背景：RN 试用了一段时间了，其中 navigator 作为一个核心组件控制着整个 rnApp 的页面切换。以前写 demo 和网上见到的一些例子，navigator 使用方式各不相同，多数还都是到切换时才会从头引用。以下：

感受好不爽，尤为是页面稍多、跳转稍复杂一点后，相互引用，后期要是稍有改动不利于维护。

作为一个前端童鞋，用惯了各 SPA 框架强大且优雅的路由控制，真受不了这样的调用方法。

借鉴一些前端 spa route 的思想，写了一个 navigator 统一路由控制。下有详述。

设计需求

1. 全部的页面 component 都在一个地方控制，这也是基本、不妥协需求；

2. 调用简单明确；

3. component 引入设置必定的规范，但不失灵活性；

4. 能够设定默认的 component 参数。

设计思路

思路也很简单，以下图：

下面简单介绍一下核心两个文件

app.js

app.js 为单纯的 naivgator 入口，在此定制 navigator 组件。

_renderRoute (route, navigator) {
        // this.route = route;
        this.navigator = navigator;
        return Route.getRoutePage(route, navigator);
    }

    <Navigator
        // 初始页面
        initialRoute={{
            id: 'homepage',
            params: {}
        }}
        // 路由入口
        renderScene={this._renderRoute.bind(this)}
        configureScene={(route, routeStack) =>
            SceneConfigs.PushFromRight
        }
        sceneStyle={{flex: 1, top: 40}}
        navigationBar={
            <Navigator.NavigationBar
                routeMapper={NavigationBarMap}
                style={{backgroundColor: 'gray', marginTop: 0, height: 40, top: 0}}
            />
        }
    />

利用 initialRoute、renderScene 方法分区肯定初始页面和路由跳转相应的页面。

补充知识：每当 naivgator push 时，都会调用 renderScene 方法。并传入相应参数。

route.js

经过跳转时 push 传入的参数，给 navigator 返回相应的 component。

'use strict';
import React from 'react';

/**
 * 全部 component 整个框架内只有此处引入
 * navigator 统一进行路由显示
 * 将所有 component 的引用从老式的层级式改成统一入口的扁平式
 */ 
import Homepage from '../components/homepage';
import List from '../components/list';
import Detail from '../components/detail';
import Error from '../components/error';

/*
 * 路由配置项
 * 可配置默认参数 props: params ，配合 this.props 的限制可以使代码更严谨
 * component 默认和 key 、component 文件夹名称一致，首字母大写，component 文件夹内强制 index.js 为入口文件
 */
const RouteMap = {
    'homepage': {index: 0, component: Homepage, params: {}},
    'list': {index: 1, component: List, params: {}},
    'detail': {index: 2, component: Detail, params: {}}
};

class Route {

    /**
     * 获取 ID 对应的 Component
     * @param {any} id 页面的 ID 
     *              有严格的映射关系，会根据传入 ID 同名的文件夹去取路由对应的页面
     * @param {any} params Component 用到的参数
     */
    static getRoutePage (route, navigator) {
        let id = route.id,
            params = route.params,
            routeObj = RouteMap[id],
            Component;
        if (routeObj) {
            Component = routeObj.component;
            //合并默认参数
            Object.assign(params, routeObj.params);
        } else {
            Component = Error;
            params = {message: '当前页面没有找到：' + id};
        }
        return <Component navigator={navigator} {...params} />;
    }     
    
}

export default Route;

在此处，规定 component 按文件夹作为模块划分，(index.js天然成为入口)，RouteMap肯定好路由的关键字 id、组件指向、默认参数。

规定 push 传来的 id 作为关键字，取到相应的 component，而后返回给 Navigator 的 renderScene 方法进行跳转。

这样，每一个 component 之间不会再有引用关系，无论页面间的跳转有多复杂，只需 navigator.push({id: XXX}) 就会跳转到指定的页面。

尾记

到此，整体的路由跳转就结束了。

如今市面好也慢慢出现了一些 RN 的框架，各类问题、坑点也都在不段的完善，之后有新内容再继续补充完善。