写点关于RN的热更新和RN版本升级后的强制更新。以及优化白屏问题

在APPDelegate中加载RN,一般的加载方式是:
RCTRootView *rootView= [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"authen_native" initialProperties:nil launchOptions:nil];

1
2
3
4
- (instancetype)initWithBundleURL:(NSURL *)bundleURL
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties
launchOptions:(NSDictionary *)launchOptions;

但在调试中发现两个现象:
1.重复进入react-native页面、退出react-native页面的操作,RCTBridge对象会被重复创建、销毁。有时候RCTBridge对象未能及时创建还会crash
2.在原生页面和react-native页面相互跳转是RCTBridge也会被重复创建,造成很大的内存开销

阅读RCTRootView.h发现一些细节:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 * - Convenience initializer -
* A bridge will be created internally.
* This initializer is intended to be used when the app has a single RCTRootView,
* otherwise create an `RCTBridge` and pass it in via `initWithBridge:moduleName:`
* to all the instances.
*/
- (instancetype)initWithBundleURL:(NSURL *)bundleURL
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties
launchOptions:(NSDictionary *)launchOptions; * - Designated initializer -
*/
- (instancetype)initWithBridge:(RCTBridge *)bridge
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER;

initWithBundleURL与initWithBridge的区别

对于项目中只有一个RCTRootView的时候建议initWithBundleURL的方法,这个方法内部创建了一个RCTBridge.

而有多个RCTRootView的情况,建议initWithBridge的方法.开发者直接创建RCTBridge,多个RCTRootView可共用一个RCTBridge。

项目中使用多个RCTRootView,推荐使用以下方法initWithBridge初始化:

1
2
3
4
5
6
 _bridge = [[RCTBridge alloc] initWithBundleURL:[SDRrectFileOption SetFileWithOption:self.luanchOption]
moduleProvider:nil
launchOptions:self.luanchOption];
RCTRootView = [[RCTRootView alloc] initWithBridge:_bridge
moduleName:@"authen_native"
initialProperties:nil];

在SDRrectFileOption中返回的是jsbundle的地址。在这个文件中可以使用NSFileManager来把jsbundle缓存到本地。但是如果是新版本的RN比如0.57要替换老版本的比如0.54的APP覆盖更新的话,记得要对比版本号,然后把缓存里面的jsbundle清除掉再返回新的jsbundle地址。不然会导致crash。

RN的热更新

在APPdelegate的didFinishLaunchingWithOptions方法中来判断是否需要Update。在Update方法中如果需要强制更新的话就就把RCTBridge调用reload方法进行热更新—和初始化使用的是同一个bridge。

1
2
3
4
5
6
7
8
- (void)checkUpdate {
patchClass *patch = [patchClass sharedInstance];
[patch checkUpdate];
patch.IS_COERCIVE = ^(NSURL *newPath) {
//是强制更新的话,就把RCTBridge调用reload方法进行热更新
[_bridge reload];
};
}

在patchClass中使用的是单例,在这个里面通过接口判断是否需要热更还是强制更新,是只更新jsbundle还是整包更新,下载文件,把下载的压缩文件解压缩,如果缓存里面有文件先删除旧的jsbundle再保存,

大专栏  关于RN的热更新ink" title="解决白屏问题">解决白屏问题

使用单例初始化一个bridge对象解决上述问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//.h
@interface : RCTBridge + (BridgeManager*)shareInstance;
@end @interface BridgeHandle : NSObject<RCTBridgeDelegate> @end //.m
implementation MallBridgeHandle - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
return [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];
}
@end @implementation
static BridgeManager * manager = nil;
static dispatch_once_t onceToken;
+ (BridgeManager*)shareInstance
{
dispatch_once(&onceToken,^{
manager = [BridgeManager alloc] initWithDelegate:[[BridgeHandle alloc] init] launchOptions:nil];
});
return manager ;
}
@end

单例在程序启动时初始化。
测试验证可以发现:内存得到优化,白屏问题得到解决。

桥接原生模块

首先我们需要创建一个类,然后导入头文件 #import <RCTBridgeModule.h> ,这个类需要实现 RCTBridgeModule 协议。

1
2
3
4
5
6
#import <Foundation/Foundation.h>
#import <RCTBridgeModule.h> @interface RNTestManager : NSObject <RCTBridgeModule> @end

模块名字

在类的实现部分,需要包含 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只会为每个管理器创建一个实例。步骤:

  1. 创建一个子类
  2. 添加 RCT_EXPORT_MODULE()标记宏
  3. 实现 -(UIView *)view 方法

创建一个子类

该组件有回调需要处理,这里即必须用到 RCTDirectEventBlock 或者 RCTBubblingEventBlock,而且命名的时候要特别注意,需要已 on 开头,熟悉 JS 的朋友应该会反应过来,这很像 JS 的事件命名规范。

@property (nonatomic, copy) RCTBubblingEventBlock onValueChange;
@property (nonatomic, copy) RCTBubblingEventBlock onSlidingComplete;

在自定义ViewManager中

  1. 初始化子View
  2. 添加 RCT_EXPORT_MODULE()标记宏
    添加TYRCBarChartViewManager 来管理TYRCBarChartView。这个TYRCBarChartViewManager : 继承自RCTViewManager。 RCTViewManager 实现 RCTBridgeModule 协议。
  3. 自定义属性RCT_CUSTOM_VIEW_PROPERTY
  4. 自定义方法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的热更新的更多相关文章

  1. ReactNative学习笔记(四)热更新和增量更新

    概括 关于RN的热更新,网上有很多现成方案,但是一般都依赖第三方服务,我所希望的是能够自己管控所有一切,所以只能自己折腾. 热更新的思路 热更新一般都是更新JS和图片,也就是在不重新安装apk的情况下 ...

  2. RN学习1——前奏,app插件化和热更新的探索

    react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客 ...

  3. iOS热更新技术被苹果官方警告?涉及到RN、Weex、JSPatch!!!

    今天一早,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术.对于修复bug提交审核的 ...

  4. RN热更新

    说白了集成RN业务,就是集成RN离线包,解析并渲染.所以,RN热更新的根本原理就是更换js bundle文件和资源文件,并重新加载,新的内容就完美的展示出来了. 目前市场上出现的3种热更新模式如下:仅 ...

  5. iOS热更新技术被苹果官方警告?涉及到RN、Weex、JSPatch

    本文为转载文章 故事背景: 这两天,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术 ...

  6. ReactNative 告别CodePush,自建热更新版本升级环境

    微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...

  7. React Native热更新(iOS)-Pushy

    React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...

  8. 移动端热更新方案(iOS+Android)

    PPT资源包含iOS+Android 各种方案分析:https://github.com/qiyer/Share/blob/master/%E7%83%AD%E6%9B%B4%E6%96%B0%E5% ...

  9. CodePush热更新组件详细接入教程

    CodePush热更新组件详细接入教程 什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发 ...

随机推荐

  1. Windows 常用配置 - 启用长路径

    Windows 启用长路径支持 打开注册表编辑器:regedit 找到如下路径:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSyte ...

  2. 吴裕雄--天生自然 JAVA开发学习:接口

    [可见度] interface 接口名称 [extends 其他的接口名] { // 声明变量 // 抽象方法 } import java.lang.*; //引入包 public interface ...

  3. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  4. soupUI解决md5加密签名,cookie传递

    问题详情: 1.接口调用需要前提状态:登录状态(cookie) 2.接口请求需要签名,签名规则为:MD5(TokenKey+apikey+timestamp+nonc) 其中 1.TokenKey.a ...

  5. nginx常见的面试题

    问题1:Nginx是用来干嘛的? Nginx是一个高性能的HTTP和反向代理服务器,这个基本是用来前端服务器集群后做负载均衡和动静分离用的. 负载均衡即是代理服务器将接收的请求均衡的分发到各服务器中, ...

  6. 【网络流+贪心】Homework

    题目描述 Taro is a student of Ibaraki College of Prominent Computing. In this semester, he takes two cou ...

  7. liquibase使用教程

    在项目中引入liquibase过程: 1.父项目 pom.xml 中添加依赖 <dependencies> <dependency> <groupId>mysql& ...

  8. 网络类(IP、dns、网络连接类)

    一.centOS 7 设置DNS方法 使用全新的命令行工具 nmcli 来设置 1.显示当前网络连接 nmcli connection show   NAME UUID TYPE DEVICE eno ...

  9. Laravel 操作指令

    php artisan migrate —path=database/migrations/v1 更新表数据 php artisan make:migration create_channels_ta ...

  10. day39-进程-队列

    #队列Queue:进程之间数据是隔离的,不共享的,但是通过multiprocessing的Queue可以实现进程之间的通信. #1.先进先出:把1 2 3放到队列里,按1 2 3的顺序拿出来. fro ...