关于RN的热更新
写点关于RN的热更新和RN版本升级后的强制更新。以及优化白屏问题
在APPDelegate中加载RN,一般的加载方式是:RCTRootView *rootView= [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"authen_native" initialProperties:nil launchOptions:nil];
1 |
- (instancetype)initWithBundleURL:(NSURL *)bundleURL |
但在调试中发现两个现象:
1.重复进入react-native页面、退出react-native页面的操作,RCTBridge对象会被重复创建、销毁。有时候RCTBridge对象未能及时创建还会crash
2.在原生页面和react-native页面相互跳转是RCTBridge也会被重复创建,造成很大的内存开销
阅读RCTRootView.h发现一些细节:
1 |
* - Convenience initializer - |
initWithBundleURL与initWithBridge的区别
对于项目中只有一个RCTRootView的时候建议initWithBundleURL的方法,这个方法内部创建了一个RCTBridge.
而有多个RCTRootView的情况,建议initWithBridge的方法.开发者直接创建RCTBridge,多个RCTRootView可共用一个RCTBridge。
项目中使用多个RCTRootView,推荐使用以下方法initWithBridge初始化:
1 |
_bridge = [[RCTBridge alloc] initWithBundleURL:[SDRrectFileOption SetFileWithOption:self.luanchOption] |
在SDRrectFileOption中返回的是jsbundle的地址。在这个文件中可以使用NSFileManager来把jsbundle缓存到本地。但是如果是新版本的RN比如0.57要替换老版本的比如0.54的APP覆盖更新的话,记得要对比版本号,然后把缓存里面的jsbundle清除掉再返回新的jsbundle地址。不然会导致crash。
RN的热更新
在APPdelegate的didFinishLaunchingWithOptions方法中来判断是否需要Update。在Update方法中如果需要强制更新的话就就把RCTBridge调用reload方法进行热更新—和初始化使用的是同一个bridge。
1 |
- (void)checkUpdate { |
在patchClass中使用的是单例,在这个里面通过接口判断是否需要热更还是强制更新,是只更新jsbundle还是整包更新,下载文件,把下载的压缩文件解压缩,如果缓存里面有文件先删除旧的jsbundle再保存,
大专栏 关于RN的热更新ink" title="解决白屏问题">解决白屏问题
使用单例初始化一个bridge对象解决上述问题:
1 |
//.h |
单例在程序启动时初始化。
测试验证可以发现:内存得到优化,白屏问题得到解决。
桥接原生模块
首先我们需要创建一个类,然后导入头文件 #import <RCTBridgeModule.h> ,这个类需要实现 RCTBridgeModule 协议。
1 |
#import <Foundation/Foundation.h> |
模块名字
在类的实现部分,需要包含 RCT_EXPORT_MODULE() 宏,这个宏也可以添加一个参数用来指定在 JS 中访问这个模块的名字。如果你不指定,默认就会使用这个 OC 类的名字。
导出方法
RCT_EXPORT_METHOD(),导出到 JS 的方法名是 OC 的方法名的第一个部分,桥接到 JS 的方法返回值类型必须是 void。RN 的桥接操作是异步的,所以如果要返回结果给 JS,你必须通过回调或者触发事件来进行。传入的参数类型有以下几种:
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) 包含本列表中任意类型
object (NSDictionary) 包含string类型的键和本列表中任意类型的值
function (RCTResponseSenderBlock)
回调函数
RCT_EXPORT_METHOD(RNInvokeOCPromise:(NSDictionary *)dictionary resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
}
桥接原生方法的最后两个参数是RCTPromiseResolveBlock 和RCTPromiseRejectBlock的话,则对应的JS方法就会返回一个Promise对象。
设置原生模块执行操作的线程
如果你在原生模块中需要更改 UI 或者必须在主线程的话,可以实现
- (dispatch_queue_t)methodQueue 方法
- (dispatch_queue_t)methodQueue {
return dispatch_get_main_queue();
}
RN使用原生的View
import入UIView+React.h文件,,原生视图都需要被一个RCTViewManager的子类来创建和管理。这些管理器在功能上有些类似“视图控制器”,但它们本质上都是单例 —— React Native只会为每个管理器创建一个实例。步骤:
- 创建一个子类
- 添加 RCT_EXPORT_MODULE()标记宏
- 实现 -(UIView *)view 方法
创建一个子类
该组件有回调需要处理,这里即必须用到 RCTDirectEventBlock 或者 RCTBubblingEventBlock,而且命名的时候要特别注意,需要已 on 开头,熟悉 JS 的朋友应该会反应过来,这很像 JS 的事件命名规范。
@property (nonatomic, copy) RCTBubblingEventBlock onValueChange;
@property (nonatomic, copy) RCTBubblingEventBlock onSlidingComplete;
在自定义ViewManager中
- 初始化子View
- 添加 RCT_EXPORT_MODULE()标记宏
添加TYRCBarChartViewManager 来管理TYRCBarChartView。这个TYRCBarChartViewManager : 继承自RCTViewManager。 RCTViewManager 实现 RCTBridgeModule 协议。 - 自定义属性RCT_CUSTOM_VIEW_PROPERTY
- 自定义方法RCT_EXPORT_METHOD(refresh){
[_barView refreshData];
}
RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass),完整的属性定义为
给JS发送事件使用 eventDispatcher
[self.rootView.bridge.eventDispatcher sendAppEventWithName:@”deviceLocalStateChange”
body:@{@”state”:state}];
参考资料
ios2.1大礼包被拒经验分享https://zhuanlan.zhihu.com/p/54042709
关于RN的热更新的更多相关文章
- ReactNative学习笔记(四)热更新和增量更新
概括 关于RN的热更新,网上有很多现成方案,但是一般都依赖第三方服务,我所希望的是能够自己管控所有一切,所以只能自己折腾. 热更新的思路 热更新一般都是更新JS和图片,也就是在不重新安装apk的情况下 ...
- RN学习1——前奏,app插件化和热更新的探索
react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客 ...
- iOS热更新技术被苹果官方警告?涉及到RN、Weex、JSPatch!!!
今天一早,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术.对于修复bug提交审核的 ...
- RN热更新
说白了集成RN业务,就是集成RN离线包,解析并渲染.所以,RN热更新的根本原理就是更换js bundle文件和资源文件,并重新加载,新的内容就完美的展示出来了. 目前市场上出现的3种热更新模式如下:仅 ...
- iOS热更新技术被苹果官方警告?涉及到RN、Weex、JSPatch
本文为转载文章 故事背景: 这两天,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术 ...
- ReactNative 告别CodePush,自建热更新版本升级环境
微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...
- React Native热更新(iOS)-Pushy
React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...
- 移动端热更新方案(iOS+Android)
PPT资源包含iOS+Android 各种方案分析:https://github.com/qiyer/Share/blob/master/%E7%83%AD%E6%9B%B4%E6%96%B0%E5% ...
- CodePush热更新组件详细接入教程
CodePush热更新组件详细接入教程 什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发 ...
随机推荐
- Windows 常用配置 - 启用长路径
Windows 启用长路径支持 打开注册表编辑器:regedit 找到如下路径:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSyte ...
- 吴裕雄--天生自然 JAVA开发学习:接口
[可见度] interface 接口名称 [extends 其他的接口名] { // 声明变量 // 抽象方法 } import java.lang.*; //引入包 public interface ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- soupUI解决md5加密签名,cookie传递
问题详情: 1.接口调用需要前提状态:登录状态(cookie) 2.接口请求需要签名,签名规则为:MD5(TokenKey+apikey+timestamp+nonc) 其中 1.TokenKey.a ...
- nginx常见的面试题
问题1:Nginx是用来干嘛的? Nginx是一个高性能的HTTP和反向代理服务器,这个基本是用来前端服务器集群后做负载均衡和动静分离用的. 负载均衡即是代理服务器将接收的请求均衡的分发到各服务器中, ...
- 【网络流+贪心】Homework
题目描述 Taro is a student of Ibaraki College of Prominent Computing. In this semester, he takes two cou ...
- liquibase使用教程
在项目中引入liquibase过程: 1.父项目 pom.xml 中添加依赖 <dependencies> <dependency> <groupId>mysql& ...
- 网络类(IP、dns、网络连接类)
一.centOS 7 设置DNS方法 使用全新的命令行工具 nmcli 来设置 1.显示当前网络连接 nmcli connection show NAME UUID TYPE DEVICE eno ...
- Laravel 操作指令
php artisan migrate —path=database/migrations/v1 更新表数据 php artisan make:migration create_channels_ta ...
- day39-进程-队列
#队列Queue:进程之间数据是隔离的,不共享的,但是通过multiprocessing的Queue可以实现进程之间的通信. #1.先进先出:把1 2 3放到队列里,按1 2 3的顺序拿出来. fro ...