React Native如何消除启动时白屏的方法


Posted in Javascript onAugust 08, 2017

在RN 项目启动之后有一个短暂的白屏,调试阶段白屏的时间较长,大概3-5秒,打正式包后这个白屏时间会大大缩短,大多时候都是一闪而过,所以称之为“闪白”。

React Native如何消除启动时白屏的方法

React Native如何消除启动时白屏的方法

其实解决的方案也有很多,这里做一个简单的总结。

白屏的原因

在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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
js+css实现select的美化效果
Mar 24 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 #Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 #Javascript
React-Native 组件之 Modal的使用详解
Aug 08 #Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 #Javascript
浅谈ES6新增的数组方法和对象
Aug 08 #Javascript
Angularjs上传文件组件flowjs功能
Aug 07 #Javascript
You might like
php抓取网站图片并保存的实现方法
2015/10/29 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
jQuery中的val()示例应用
2014/02/26 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
如何在python中写hive脚本
2019/11/08 Python
Python-opencv 双线性插值实例
2020/01/17 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python类的继承super相关原理解析
2020/10/22 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
大客户销售经理职责
2013/12/04 职场文书
捐款倡议书
2014/04/14 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
致青春观后感
2015/06/09 职场文书
特种设备安全管理制度
2015/08/06 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Promise面试题详解之控制并发
2021/05/14 面试题