native react 更新机制_React Native 热更新实现（客户端 + 服务器端）

最新推荐文章于 2024-09-27 07:16:16 发布

weixin_39592240

最新推荐文章于 2024-09-27 07:16:16 发布

阅读量333

点赞数

文章标签： native react 更新机制

本文链接：https://blog.csdn.net/weixin_39592240/article/details/111746773

版权

本文介绍了如何在React Native中实现热更新，以解决无需发布版本即可升级和修复bug的问题。文中提到MicroSoft CodePush和pushy的方案，并指出其存在的安全隐患。为了解决这些问题，文章提出了在Native层实现更新机制，以提高安全性。文章还详细描述了项目的功能特点、使用方法，包括服务器端的Node.js和Express实现，以及Android客户端的配置和接口说明。后续更新中可以考虑添加jsbundle包的加密和预加载功能。

摘要由CSDN通过智能技术生成

1. 背景

目前，大家考虑使用React Native 技术的关键点主要有三个:

iOS和Android端可以使用统一的语言进行构建，并且部分组件代码可以实现共用

热更新能力，无需发布版本即可实现升级、bug修复等内容

体验接近原生 App

针对于第2点，MicroSoft CodePush.和React Native中文网 pushy都提供了相似的解决方案，其方案内容时将jsbundle的管理放置在了自己发服务器上，通过相关的js升级模块来检测升级并实现重新加载。然而，由于js代码本身就是源码的形式提供出去的，放到他人服务器上安全性难以保障；同时两者将热更新服务写在了js代码中，这意味着必须先加载了jsbundle，更新服务才能进行使用，那么为了安全，必须保障加载前的jsbundle是合法的、安全的。

基于以上两点的考虑，本项目抛弃了将更新服务器逻辑写在js代码中的实现方案，采用在Native层进行实现。

2. 项目地址

3. 功能特点

适合于将React Native用于某个子业务的场景，即由Native的页面事件调起整个React Native应用，如图；

实例

使用简单，在Native页面的适合时机调用MMCodePush.checkForUpdate(...)即可完成更新检查和下载任务，启动React Native时会自动检查是否下载完成等内容，Native只需要将业务id通过Intent传给MMBaseActivity即可；

Intent intent = new Intent(mContext, DemoRNActivity.class);

intent.putExtra(MMCodePushConstants.KEY_BUSINESS_ID, "AAF047B7-E816-2AE0-949A-D5FB4CE40245");

mContext.startActivity(intent);

使用laoding页面解决React Native加载前的白屏问题，等待加载完成再消除loading界面；

使用了common包 + n个业务小包的机制，减少了下载量，同时使用了bsdiff合成完整包时，完整包用完即删除，落脚地时间极短(可在一定程度上保护jsbundle文件，结合文件加密等措施可以更安全地保护文件)

服务器端代码，使用Node.js和Express框架构建。服务器将完整的jsbundle包拆分为一个公共包和一个业务包,拆分使用的是bsDiff算法，(可以自行替换成为google-diff-match-patch,两个算法的比较见https://github.com/MarcusMa/compare-file-diff-tools )，更加客户端返回的包的信息发送对应的升级包下载地址。

4. 使用方法

4.1 服务器

安装node.js，操作可百度或谷歌;

进入到本项目根目录，执行npm install;

如npm不能很好使用，请切换成cnpm;

在根目录下执行node index, 完成服务器启动;

若有要测试新的更新包，请将文件防止在public/original/business目录下，同时命名方式参照该目录下已有的文件格式，之后重启服务即可完成新包的发布。

4.2 Android客户端

//注意修改MMCodePush的访问地址,如下：

String mServerUrl = "http://172.20.143.41:8888";

codePush = new MMCodePush(this, mServerUrl, true);

若要测试新包的发布，请参考服务器的发布说明