当 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类用来发送移除占位图的通知
-------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 方法 发出通知 关闭占位图