RN热更新说明

项目

热更新原理

针对应用实现线上问题及时修复的需求，现在银行一帐通项目大部分业务使用的ReactNative框架进行开发管理。(ReactNative 下面简称RN）

RN原理主要是在移动两端加入比较完善的中间件，读取js和css编写的资源模块，渲染解析构建原生UI组件，因此比起H5页面，RN渲染的页面要更加接近原生体验，同时这个框架也实现了移动两端使用同一套代码管理。

js不是编译型语言，只需RN框架解释运行即可，且代码是动态加载的，我们可以在应用加载阶段替换对应代码资源，实现对问题代码的修复。

热修复不是万能的

RN代码可以动态加载，存在资源被替换、代码泄露的安全性问题。正是出于安全的需要、性能的考虑、还有应用集成第三方的SDK，应用的功能并不是全部由RN掌管。网络请求、明文加密、OCR、扫码功能、微信新浪分享等都是用原生代码实现的。如果这些部分功能出现问题，只能通过开发新版本，强制更新应用解决。

热修复的范围

网络请求、明文加密等功能是基础功能，都是经过测试团队好几轮严格的测试，出现问题的可能很小。

虽然存在部分业务不能被修复，但能够热修复的范围还是很广的。
比如：

• 首页业务展示
  

• 二级列表
  

• 用户注册开户
  
• 部分转账业务
  
• 使用RN编写的业务

项目大部分业务的UI都是使用RN编写的，所以大部分只涉及页面改动或者简单逻辑修改的情况热修复是能够很好地完成它的任务。

不适用的范围：

安全敏感度比较高的操作，比如：

• 转账的蓝牙key验证
• 交易密码验证弹框
• 指纹验证弹框
• 短信验证码弹框

这一类通常都是用原生代码编写的组件，不能热更新来解决

性能要求比较高的业务，比如：

• 扫码功能，原生代码实现的
• 选择收款人页面 （列表搜索）

热修复目的是及时修复线上问题，如果是不需要紧急修复的问题，建议通过发版解决

安卓手机上如何辨认当前页面的类型

授人予鱼不如授人予渔，下面内容将教大家怎么辨认当前页面是否是RN页面

• 如果电脑上有adb工具的话，可以通过在终端输入 adb shell dumpsys activity activities, 检查当前activity是否是ReactActivity，如果是那这个页面就是RN页面
• 打开设置->开发者选项->打开显示布局边界， 观察页面的特点，RN、H5和原生页面的布局边界都是不一样的

原生页面的特点：

由于原生布局经常用到margin属性，在布局边界上会出现像红色箭头所指的红色区域

RN页面的特点：

RN页面的渲染是由Facebook的中间件负责的，直接用坐标定位，没用到控件的margin属性，所以最大的特点就是有大量的红色布局边界边框线，看不到像原生页面经常出现的红色区域

H5页面的特点：

RN和原生页面都是原生组件渲染显示，H5页面是由webkit引擎渲染显示，H5的布局边界并不能像原生组件一样被检测到，所以H5页面在开启布局边界显示下也是没有边框线显示。