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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
javascript的console.log()用法小结
May 31 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jQuery知识点整理
Jan 30 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
jquery拖动改变div大小
Jul 04 jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
关于AOP在JS中的实现与应用详解
May 06 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封装的smarty类完整实例
2016/10/19 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
react 国际化的实现代码示例
2018/09/14 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
新闻编辑自荐信
2013/11/03 职场文书
社会实践心得体会范文
2016/01/14 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
mysql主从复制的实现步骤
2021/10/24 MySQL
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python