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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
ES6的新特性概览
Mar 10 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
js数组常用最重要的方法
Feb 04 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
详解python运行三种方式
2019/05/13 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
2015年中秋寄语
2015/07/31 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python