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

    xiaoxiao2021-03-25  272

    现有技术及问题

    现有技术例如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页面。

    转载请注明原文地址: https://ju.6miu.com/read-359.html

    最新回复(0)