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);

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

5. 接口说明

/checkForUpdate 检查jsbundle是否有更新接口

接口请求示例

{

businessList:[

{

id:"AAF047B7-E816-2AE0-949A-D5FB4CE40245"

hashcode:"01824139386045ca6739dd52b3bfb74a76b9b99fefb336f4e1a147a182cad6ba"

}

]

}

接口返回示例

{

success: 1,

msg: "成功"

data: [{

id: "AAF047B7-E816-2AE0-949A-D5FB4CE40245", // 验证通过且有升级包的情况

verifyHashCode: "01824139386045ca6739dd52b3bfb74a76b9b99fefb336f4e1a147a182cad6ba",

latestPatch: {

hashCode: "c1bbdc02200b5e5a72cf97bbdc3339165e71182c61f",

downloadUrl: "http://download.marcusma.com/rn/marcusma.patch",

}

}

]

}

6. 后续更新

可添加对jsbundle包的加密措施;

可添加预加载功能,提高加载时间;

native react 更新机制_React Native 热更新实现(客户端 + 服务器端)相关推荐

  1. native react 更新机制_React Native - 组件的生命周期详解(附:各阶段调用的方法)...

    一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...

  2. native react 常用指令_React Native入门基础篇(一)

    学习一次,随处书写.(以下文字来自各大网上资料整理而来,侵删!) 概述 使用React为Android和iOS创建本机应用 React Native将本机开发的最佳部分与React(用于构建用户界面的 ...

  3. native react 折线图_react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  4. native react 常用指令_React Native 常用的 15 个库

    点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家 ...

  5. native react 常用指令_React Native 常用命令或快捷键合集

    命令: react-native init "项目名称" : 运行React Native的初始化命令,创建一个项目 npm install : 需要在工程目录下用此命令将依赖包下 ...

  6. native react 图片裁剪_react native 头像上传 react-native-image-crop-picker

    之前用的是react-native-image-picker,但是当往服务器端传的时候才发现,因为没有图片裁切,所以图片过大,无法保存,所以只好更换成react-native-image-crop-p ...

  7. Android热更新初探,Bugly热更新的集成和使用(让你的应用轻松具备热更新能力)

    介绍   在介绍Bugly之前,需要先向大家简单介绍下一些热更新的相关内容.当前市面的热补丁方案有很多,其中比较出名的有阿里的AndFix.美团的Robust以及QZone的超级补丁方案.但它们都存在 ...

  8. springboot基于Elasticsearch6.x版本进行ES同义词、停用词(停止词)插件配置,远程词典热加载及数据库词典热加载总结,es停用词热更新,es同义词热更新

    前言:ES版本差异较大,建议跨版本的同学,可以先了解一下版本区别,建议不要跨版本使用插件或者进行项目调试. 本总结主要基于6.x版本的6.5.1(6.2.2实测可用),分词器为IK,下载地址:http ...

  9. React Native带你一步步实现热更新(CodePush-Android)

    前言:无奈研究了一下CodePush,遇到了很多坑-- 但是原理呢不是很难理解,就是配置有点多,原理可以简单的参考一下我之前的一篇博客React-Native 热更新尝试(Android),下面说一下 ...

最新文章

  1. Eclipse中怎样使用ERMaster进行单表设计并导出为DDL
  2. 请求数据分析 xpath语法 与lxml库
  3. 都江堰很美-佩服古人_Crmhf的一天
  4. 推荐12款非常有用的流行 jQuery 插件
  5. 【重磅快讯】T11 2019数据智能技术峰会举办,AI将成为行业颠覆者
  6. maven 插件深入了解
  7. 全国所有火车站站点信息
  8. 物联网定位系统:GPS、WiFi、基站、RFID…
  9. Entertain Box multiset的应用
  10. 2022-2027年(新版)中国大米行业营销战略与供应情况预测报告
  11. Android按键音
  12. 【加装固态硬盘】联想小新Air15-IKBR 2018款加装固态硬盘教程
  13. php为什么被叫做拍黄片 故事起因
  14. 最完整Android Studio插件整理
  15. Java Json和yaml转换
  16. netty客户端连接后无限发送数据,连接不上时无限重试,断线重连
  17. 将tomcat注册为Windows服务
  18. 《坚持,一种可以养成的习惯》读书笔记
  19. 8种常见的大数据分析模型
  20. Premiere模板插件预设 1300个摄像机缩放平移扭曲旋转图形干扰炫光水墨婚礼体育vlog视频转场

热门文章

  1. C语言 读取文件中特定数据
  2. table标签中thead、tbody、tfoot的作用
  3. 关于updatepanel回传之后JS失效问题
  4. Python之抖音快手代码舞--字符舞
  5. warning C4996 错误
  6. Android Binder Driver流程分析
  7. C++ map()和pair()用法
  8. Smali语法汇总(二)
  9. PCIE万兆网卡-华硕XG-C100C
  10. 如何搭建MySQL数据库,常用的数据库命令