IOS集成react-native 混合开发跳转页面时候短暂白屏处理方案

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 
#import 
#import 

@interface ReactRootViewManager : NSObject

/* 全局唯一的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 * 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 回控制器的时候内存并不降低.
还请大神能够指点下