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 简单的进度条实现代码
Mar 11 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python实现百度关键词排名查询
2014/03/30 Python
python中的字典详细介绍
2014/09/18 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python中SQLite如何使用
2020/05/27 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
趣味活动策划方案
2014/02/08 职场文书
开业庆典策划方案
2014/02/18 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
大学生毕业评语
2014/12/31 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android