React Native如何消除启动时白屏
时间:2022-04-24
本文章向大家介绍React Native如何消除启动时白屏,主要内容包括白屏的原因、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
在RN 项目启动之后有一个短暂的白屏,调试阶段白屏的时间较长,大概3-5秒,打正式包后这个白屏时间会大大缩短,大多时候都是一闪而过,所以称之为“闪白”。
其实解决的方案也有很多,这里做一个简单的总结。
白屏的原因
在iOS App 中有 启动图(LaunchImage),启动图结束后才会出现上述的闪白,这个过程是 JS 解释的过程,JS 解释完毕之前没有内容,所以才表现出白屏,那么解决的方法就是在启动图结束后,JS 解释完成前做一些简单的处理。
解决的常见方案:
- 启动图结束后通过原生代码加载一张全屏占位图片,跟启动图一样的图片,混淆视听“欺骗用户”。
- JS解释完毕后通知原生可以移除占位图
- 收到 JS 发来的可以移除占位图的通知,移除占位图
代码实现
新建一个SplashScreen 文件用来接收 JS 发来的”移除占位图”的消息。相关代码如下: SplashScreen.h
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface SplashScreen : NSObject<RCTBridgeModule>
@end
SplashScreen.m
#import "SplashScreen.h"
@implementation SplashScreen
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(close){
[[NSNotificationCenter defaultCenter] postNotificationName:@"Notification_CLOSE_SPLASH_SCREEN" object:nil];
}
@end
在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];
...
[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];
}
-(void)closeSplashImage {
dispatch_sync(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.5 animations:^{
splashImage.alpha = 0;
} completion:^(BOOL finished){
[splashImage removeFromSuperview];
}];
});
}
在合适的时机选择移除占位图。js端代码:
if (Platform.OS === 'ios') {
NativeModules.SplashScreen.close();
};
更加详细的信息可以访问:https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md
- 利用mk-table-checksum监测Mysql主从数据一致性操作记录
- mysql主从同步(4)-Slave延迟状态监控
- 浏览器窗口尺寸改变时的图片自动重新定位
- Mongodb主从复制/ 副本集/分片集群介绍
- Paul-Adrien Menez:互联网与抵制食物浪费的故事
- DRBD详细解说及配置过程记录
- Servant:基于Web的IIS管理工具
- Web前端知识体系精简——CSS 篇
- 几种异步操作方式
- 今天的面试小记
- objective-C中的序列化(serialize)与反序列化(deserialize)
- 微信小程序 template 模板功能实现循环
- ASP.NET Web API 接口执行时间监控
- 这么多前端优化点你都记得住吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- zabbix入门学习
- 突击并发编程JUC系列-ReentrantReadWriteLock
- Qt音视频开发33-ffmpeg安卓版
- Vue.js|Nuxt仿制探探堆叠滑动|vue仿Tinder卡片效果
- Elasticsearch:透彻理解 Elasticsearch 中的 Bucket aggregation
- html+js开发模拟考试在线评分系统
- iOS音视频接入 - TRTC接入实时视频通话
- LRU缓存淘汰机制C++实现
- ant-design-vue运行时动态切换主题色
- 使用electron将vue-cli3.x项目打包为桌面应用
- Ubuntu 16.04下安装服务器端Shadowsocks
- 解决vue cli3.x打包上线静态资源找不到路径问题
- Ant-design-vue+vue-i18n实现前端国际化
- Mac OSX终端安装主题(oh my zsh)
- 谷歌浏览器油猴插件安装教程,让你的浏览器更加强大