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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
ES5和ES6中类的区别总结
Dec 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实现 上一篇、下一篇的代码
2012/09/29 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php中switch语句用法详解
2015/08/17 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
json跟xml的对比分析
2008/06/10 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
Postman参数化实现过程及原理解析
2020/08/13 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Python 可视化神器Plotly详解
2020/12/26 Python
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
欢送退休感言
2014/02/08 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
村党组织公开承诺书
2015/04/30 职场文书
预备党员党支部意见
2015/06/02 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技