ios集成react-native 混合开发多个页面跳转到react-native 会出现短暂加载白屏的问题.
之前安卓的已经解决调了,以为iOS不会有问题,结果也发现了问题.
怎么办?无从下手,不知道该怎么处理.
重头开始理清楚他的加载过程吧.....
国际惯例 google和 阅读了源码后发现如下代码
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNChatDemo"
initialProperties:nil
launchOptions:launchOptions];
在RN端的入口中，我们用AppRegistry的registerComponent方法来注册组件，其第一个参数对应的便是ios中的moduleName，所以我们可以在RN入口处注册多个组件，在ios端我们需要用的哪个RN组件时，便改变moduleName值来加载这个RN组件即可。
//RN端入口index.js
AppRegistry.registerComponent('RNDemo', () => App);
源码里的代码
/**
* - Designated initializer -
*/
- (instancetype)initWithBridge:(RCTBridge *)bridge
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER;
/**
* - 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;
initWithBundleURL这个方法会先建一个RCTBridge的实例，方法适用于整个app只有一个RCTRootView的情况，在有多个RCTBridge的情况下，我们可以先建立一个全局的bridge，使用initWithBridge这个方法去展示RN
我们先创建一个个NSObject类，让其实现RCTBridgeDelegate协议代码如下
ReactRootViewManager.h
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTBridge.h>
@interface ReactRootViewManager : NSObject<RCTBridgeDelegate>
/* 全局唯一的bridge */
@property (nonatomic, strong, readonly) RCTBridge * bridge;
/*
* 获取单例
*/
+ (instancetype)manager;
/*
* 根据viewName预加载bundle文件
* param:
* viewName RN界面名称
* initialProperty: 初始化参数
*/
- (void)preLoadRootViewWithName:(NSString *)viewName;
- (void)preLoadRootViewWithName:(NSString *)viewName initialProperty:(NSDictionary *)initialProperty;
/*
* 根据viewName获取rootView
* param:
* viewName RN界面名称
*
* return: 返回匹配的rootView
*/
- (RCTRootView *)rootViewWithName:(NSString *)viewName;
@end
ReactRootViewManager.m
#import "ReactRootViewManager.h"
@interface ReactRootViewManager ()
// 以 viewName-rootView 的形式保存需预加载的RN界面
@property (nonatomic, strong) NSMutableDictionary<NSString *, RCTRootView*> * rootViewMap;
@end
@implementation ReactRootViewManager
- (void)dealloc {
_rootViewMap = nil;
[_bridge invalidate];
}
+ (instancetype)manager {
static ReactRootViewManager * _rootViewManager = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
_rootViewManager = [[ReactRootViewManager alloc] init];
});
return _rootViewManager;
}
- (instancetype)init {
if (self = [super init]) {
_rootViewMap = [NSMutableDictionary dictionaryWithCapacity:0];
_bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
}
return self;
}
- (void)preLoadRootViewWithName:(NSString *)viewName {
[self preLoadRootViewWithName:viewName initialProperty:nil];
}
- (void)preLoadRootViewWithName:(NSString *)viewName initialProperty:(NSDictionary *)initialProperty {
if (!viewName && [_rootViewMap objectForKey:viewName]) {
return;
}
// 由bridge创建rootView
RCTRootView * rnView = [[RCTRootView alloc] initWithBridge:self.bridge
moduleName:viewName
initialProperties:initialProperty];
[_rootViewMap setObject:rnView forKey:viewName];
}
- (RCTRootView *)rootViewWithName:(NSString *)viewName {
if (!viewName) {
return nil;
}
return [self.rootViewMap objectForKey:viewName];
}
#pragma mark - RCTBridgeDelegate
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
}
@end
你可以把下面代码加到任何地方你想要加的地方
最好是程序启动时候就加载.
我是放在了AppDelegate.m
[[ReactRootViewManager manager] preLoadRootViewWithName:@"Demo"];
//多个bridge 的时候可以这么写
[[ReactRootViewManager manager] preLoadRootViewWithName:@"Demo1"];
[[ReactRootViewManager manager] preLoadRootViewWithName:@"Demo2"];
这样就能保证加载时候就把view加载进来
当在你需要跳转页面的时候 你可以这么写
#import "ReactRootViewManager.h"
RCTRootView * rootView = [[RCTRootView alloc] initWithBridge:[ReactRootViewManager manager].bridge
moduleName:@"Demo"
initialProperties:
@{
@"userid":userID,
}
];
OK 这样你会发现 当你有多个RN页面需要混合开发的时候,不会出现短暂白屏现象.
当然也有不好的地方 就是你pop 回控制器的时候内存并不降低.
还请大神能够指点下
