关于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相当于一个中心仓库,开发 ...
随机推荐
- 计算KS值的标准代码
计算KS值的标准代码 from scipy.stats import ks_2samp get_ks = lambda y_pred,y_true: ks_2samp(y_pred[y_true==1 ...
- Ansible部署rsync、nfs及sersync
rsync nfs sersync httpd环境: 角色 外网IP(NAT) 内网IP(LAN) 主机名 Rsync服务端 eth0:10.0.1.51 eth1:172.16.1.51 backu ...
- TPO3-2Deletion of Ogallala Aquifer
In the face of the upcoming water supply crisis, a number of grandiose schemes have been developed t ...
- 5G时代将至,哪些改变会随之而来?
近年来,运营商不断被唱衰.关键原因就在于运营商的各项业务,在互联网的冲击下已经愈发"萎缩".尤其是短信和语音通话,它们的价值在不断被降低.简而言之,运营商似乎成为了纯粹的" ...
- python基础——散列类型
集合 集合具有不重复性,无序性的可变对象. 集合定义 直接定义 如:a = {'a','b',2} 别的类型转换,利用set a = set(b) 其中b可以是一个列表或字符串等 增 add ...
- 0x06 - Nginx 负载均衡会话保持
Nginx 负载均衡会话保持 背景 负载均衡时,如果APP需要保持特定状态的时候,就要保证同一用户的 session 会被分配到同一台服务器上. 实现方案 使用cookie 将用户的 session ...
- 传输层TCP和UDP
TCP协议 传输控制协议 TCP是面向连接.可靠的进程到进程通信的协议 TCP提供全双工工服务,即数据可在同一时间双向传输 三次握手: ...
- jquery JavaScript如何监听button事件
下面的html页面中有两个按钮 <div class="layui-tab-item layui-show"> <form class="layui-f ...
- numpy.ravel() 与 numpy.flatten()
两者都可实现将多维数组降位一维的功能 numpy.flatten()返回拷贝,对拷贝所做的修改不会影响原始矩阵 numpy.ravel()返回视图,会影响原始矩阵 1)ravel() In [16]: ...
- FPGA时序分析
更新于20180823 时序检查中对异步复位电路的时序分析叫做()和()? 这个题做的让人有点懵,我知道异步复位电路一般需要做异步复位.同步释放处理,但不知道这里问的啥意思.这里指的是恢复时间检查和移 ...