一、纯RN路由

适用于纯RN，使用react-navigation即可，仅需使用AppRegistry.registerComponent注册一个根组件

只会存在一个VC或activity，所有的路由跳转其实都是在同一个VC或activity内跳转

纯RN路由设计理念跟前端路由设计比较类似，没有接触过前端的Native刚开始接触可能会有点别扭

如果有后续转混合的计划，建议在设计之初就使用桥接模式管理路由，为以后路由管理铺好路

二、纯Native路由

每个RN页面，都使用AppRegistry.registerComponent单独注册，然后在Native端利用注册的组件创建的单独的RootView，并最终创建单独的VC承载。

性能上肯定是纯Native更好，但相差并不大(用户基本无感知)

在此感谢吉祥老师给的灵感

三、携程 - 混合路由

携程CRN目前走的是混合路线，更多细节查看CRN的一些研究

如果有些模块需要在其他App内复用，建议采用携程的模式，他们对路由进行了优化(没开源)，管理起来应该会方便些。

四、橘子 - 混合路由

我们的核心思路是不让RN路由和Native路由有交叉，因为两者一旦交叉，就会衍生出很多case要处理，最为头疼的就是RN路由栈和Native路由栈的交叉管理

因此我们对纯Native路由做了一个小小的变通，当我们App要嵌入一个跟当前业务完全无关的模块时，单独为这个模块打一个bundle，这个bundle就一个注册组件，内部跳转由navigation接管，类似于微信小程序那种。这样就实现了RN路由和Native路由的隔离，不用在再担心两种路由交叉的问题。

1. 生命周期的管理

每次Native跳转，都要生成一个不会重复的pageId属性跟当前VC或Activity绑定，并且伴随参数传给RN页面，

RN页面在componentDidMount利用RN提供的通知DeviceEventEmitter注册生命周期事件，key就是生命周期名字加pageId，比如willAppear_pageId，didAppear_pageId。记得在componentWillUnmount里销毁该事件。

当Native的路由操作触发VC或Activity的生命周期时，在Native的生命周期事件里通过之前注册的pageId发送通知，触发RN中相应的事件

建议所有的页面都被高阶包含，这样就可以在高阶里统一注册和销毁了

2. iOS侧滑的管理

每次新进入一个页面都开启侧滑，然后Native提供RN层关闭的方法，这样当前页面可以根据需要决定是否关闭侧滑

3. 参数的管理

这个没啥好聊的，将跳转的参数在创建RootView的时候传过去就行

4. callback的管理

在创建RootView时传的参数只能包含基本类型，不能包含函数，因此还得通过id的方式来处理

在RN调用Native的路由方法时，首先判断参数里是否有callback回调，没有就正常跳转

有的话，为这个callback生成一个callbackId，并且以该callbackId作为key，callback为value通过DeviceEventEmitter将回调注册到RN中，并且将callbackId伴随参数传给RN页面

执行callback时，其实就是触发key为callbackId所对应的事件

如果设计多Bridge的设计，当跨bridge跳转时事件无法同步，就不能通过RN触发了，得通过Native找到相应的bridge进行触发。

5. 热更新

RN本身提供有热更新的逻辑，但若层级过深，就会失效。而这种路由方式因为每个页面都是一个VC/Activity，所以直接在当前页面reload刷新即可。不用回到首页，在一级级今天当前页面。

RN与Native混合App的路由方案相关推荐

h5封装去底部_Appium—Native+H5混合APP的自动化
前言小编所在项目的客户端是比较奇怪的一个APP,大部分页面Android和iOS的客户端只提供了webview的功能,都是由H5处理业务逻辑和用户交互.H5承担了和服务端.和客户端的交互. 虽然在开 ...
Android仿饿了么加减控件,Flutter + Native混合栈仿饿了么APP
前言一个基于Flutter + Native混合开发的APP,请求数据均人为制造. 目前仅上传Android版本,iOS暂未上传 APK下载 Github地址效果图: 实现功能: 首页使用百度定 ...
react native app应用更新方案
最近公司有需求做一个react native app应用更新方案,试了很多插件都不靠谱最后还是选择了搭配 rn-fetch-blob 进行封装引入 rn-fetch-blob import RN ...
RN(React Native)
RN是React的原生组件库网址:React Native 中文网 · 使用React来编写原生应用的框架一.ReactNative开发环境的搭建在本机搭建RN项目开发运行环境 -- 3GB+ ...
混合 APP 开发(Hybrid App)
目录混合 App Html5简介 UIWebView 和 WKWebView UIWebView 和 JS 交互 WKWebView 和 JS 交互 JS 调用 Native 相机一. 混合 AP ...
App跨平台开发方案与抉择
内心强大才敢于承认错误,但是首先你要敢于去试错. 现在做客户端开发的公司都会面临一个巨大的问题,那么就是跨平台.对于目前上市面上的移动设备来说.Android.IOS.WindowsPhone.Bla ...
vue做混合式app_Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程（大地）...
Vue+Cordova打造跨平台可安装的混合APP视频教程必看说明: 目前购买此教程送Html5+Cordova+Ionic智能电视(TV)应用开发教程视频教程: 购买过Ionic的同学可以直接在( ...
移动开发-混合App介绍
3种开发类型的原理和对比什么是混合App(Hybrid App) Hybrid App是指介于web-app(网页APP,如京东web).native-app(原生应用,如手机上面的APP应用)这两 ...
开发缺点_成都嗨创科技：原生APP开发与混合APP开发的优缺点对比
原生APP开发 1.开发语言: 安卓APP:Java开发语言: 苹果APP:Objective-C 或Swift 开发语言: 均为官方规定开发语言: 2.优点 1)使用体验较好,能够实现较为复杂的交互 ...

RN与Native混合App的路由方案

目录

一、纯RN路由

二、纯Native路由

三、携程 - 混合路由

四、橘子 - 混合路由

1. 生命周期的管理

2. iOS侧滑的管理

3. 参数的管理

4. callback的管理

5. 热更新

RN与Native混合App的路由方案相关推荐

最新文章

热门文章