一种ReactNative Android、IOS、Web融合的路由生成引擎

现有技术及问题

现有技术例如ReactWeb只能完成ReactNative（类原生）到Web js的页面转换，无法解决ReactNative上工作的页面跳转，到Web上的页面跳转的转换。
问题是在于ReactNative的页面跳转是调用原生方案实现的，也就是在内存里有一个页面栈结构，用户按返回可以实现销毁当前页面栈，退回之前的栈顶。
而Web方案是在浏览器上，浏览器是无状态的，不会保存上一个页面。
所以ReactNative ios、android和web的路由方案需要重新设计。

Web js技术路由方案介绍

先说一下Web js的路由跳转
实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观。

function Router() {
    this.routes = {};
    this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();

上面路由系统 Router 对象实现，主要提供三个方法
init 监听浏览器 url hash 更新事件
route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
refresh 执行当前url对应的回调函数，更新页面。
其实简单来说，就是页面跳转的时候，页面名称拿到，这个时候浏览器会监听到页面变化，此时重载跳转方法，将页面名称对应的页面实际业务，显示出来。

但是ReactNative（可以在ios、android系统上运行）技术的App很大程度是基于原生Api开发的，在Android、Ios页面里，一个个页面是以一个栈的形式存储的。没有所谓的页面跳转重载监听方法。

在这里，我们实现一套理论上通用的Web、ReactNative路由方案。

通用路由引擎

本方案的前提是ReactNative的代码是由Web js转换过来的，具体转换技术参考ReactWeb的实现，是已有技术。
设计一个Router对象，并且App内维护一个key、value键值对的对象。
分别对应于
页面模块的名称——伪链接
module1 —— url1
module2 ——-url2
module3 ——-url3
… ——-…

Web js，是通过url1，url2，url3注册到Web js路由方案的Routers对象里，点击跳转时，Routers拿到要跳转的url，通过web浏览器引擎调用这个url，就会呈现新的页面。
但是ReactNative方案，url1，url2，url3，点击本身是无响应的，因为只有在有web浏览器引擎的时候，才会相应url点击跳转。
那么我们通过以下引擎来实现url到业务模块的跳转。

ReactNative页面还是有一个Routers对象，而且所有的页面也是和Web类似url绑定的，ReactWeb项目转换后的ReactNative代码，里面的路由方案还是url跳转，但是本身在ReactNative上是不工作的，例如这个方法点击跳转gourl，但gourl不工作，
我们可以在gourl这个方法里加入一个钩子函数，hook住，做以下处理，
启动手机本身的浏览器引擎，浏览器拿到新的url，就会响应加载新的url的事件，
我们可以在web浏览器引擎的shouldoverrideurl函数里（加载url的回调函数，web浏览器引擎自带），实现url->页面名称的转换，并且通过ReactNative的startnewpage类似的方法，加载新的ReactNative页面。