react-native 启动白屏问题解决方案

当 react-native 的 bundle 包过大的时候,可能会出现加载完启动图之后会有一个白屏出现 ,然后才是你的 APP 的第一个页面, 这是由于在加载完启动图之后,也就是执行完 applicationDidFinishLaunch(){}的时候,React Native应用在启动时会将js bundle读取到内存中，并完成渲染。这期间由于js bundle还没有完成装载并渲染，所以界面显示的是白屏。

如何优化这个问题?

1>> 可以分包 但是很麻烦

2>>在启动图结束后, js bundle 解析完之前, 制造一个假象, 也就是欺骗用户, 让用户以为还在展示 launchImage 实际上 launchImage 早已展示完了, 在 native 放一张和启动图一样的图片

具体步骤如下:

(1) - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions;  // 启动图结束调用的方法 在这里设置一个跟启动图一样的占位图

(2)componentDidMount() { }  // js bundle里的第一个页面的组件加载的方法 也就是 js解析完成之后将会第一个调用的方法, 在这个方法里移除占位图 具体可以利用通知 在这里发送关闭的通知 收到通知后 隐藏占位图

具体实现:

1>> 新建一个 nativeMoudle  SplashScreen类用来发送移除占位图的通知

#import <Foundation/Foundation.h>

#import "RCTBridgeModule.h"

@interface SplashScreen : NSObject<RCTBridgeModule>

@end

.m文件 暴露一个供 js 调用的方法 js bundle 解析完成之后 调用该方法 即可发送关闭的通知 native 收到通知即可移除占位图

#import "SplashScreen.h"

@implementation SplashScreen RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(close){

　　[[NSNotificationCenter defaultCenter] postNotificationName:@"Notification_CLOSE_SPLASH_SCREEN" object:nil];

}

@end

-------native 中 AppDelegate.m-----------

@interface AppDelegate (){

　　UIImageView *splashImage;

}

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

　　// 添加监听者 监听关闭占位图的通知

　　 [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(closeSplashImage) name:"Notification_CLOSE_SPLASH_SCREEN" object:nil];

　　　XXXXXXXXXXX

　　　[self autoSplashScreen];//写在 return YES 之前，其他代码之后

　　　return YES;

}

-(void)autoSplashScreen {

　　 if (!splashImage) {

　　　　splashImage = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];

　　}

　　if (IPHONESCREEN3p5) {

　　　　 [splashImage setImage:[UIImage imageNamed:@"launch4"]];

　　}else if (IPHONESCREEN4){

　　　　 [splashImage setImage:[UIImage imageNamed:@"launch5"]];

　　 }else if (IPHONESCREEN4p7){

　　　　[splashImage setImage:[UIImage imageNamed:@"launch6"]];

　　}else if (IPHONESCREEN5p5){

　　　　 [splashImage setImage:[UIImage imageNamed:@"launch7"]];

　　 }

　　 [self.window addSubview:splashImage];  // 最后在添加到父视图上 保证不会被遮盖

}

// 收到通知之后  动画将透明度变为0 然后移除 即可显示 js bundle 里的第一个页面

-(void)closeSplashImage {

　　dispatch_sync(dispatch_get_main_queue(), ^{

　　　　 [UIView animateWithDuration:0.5 animations:^{

　　　　　　splashImage.alpha = 0;

　　} completion:^(BOOL finished){

　　　　[splashImage removeFromSuperview];

}]; }); }

最后一步

if (Platform.OS === 'ios') {

　　NativeModules.SplashScreen.close();

};

在 js第一个页面里选择合适的时机 调用 nativeMoudle 的 close 方法 发出通知 关闭占位图