React Native如何消除启动时白屏

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

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

白屏的原因

在iOS App 中有 启动图(LaunchImage),启动图结束后才会出现上述的闪白,这个过程是 JS 解释的过程,JS 解释完毕之前没有内容,所以才表现出白屏,那么解决的方法就是在启动图结束后,JS 解释完成前做一些简单的处理。

解决的常见方案:

  1. 启动图结束后通过原生代码加载一张全屏占位图片,跟启动图一样的图片,混淆视听“欺骗用户”。
  2. JS解释完毕后通知原生可以移除占位图
  3. 收到 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS开发攻城狮的集散地

Url Scheme实现APP间通信、分享

1905
来自专栏向治洪

React Native如何消除启动时白屏

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

2417
来自专栏iOS开发日记

iOS开发系列——第一个iOS程序和运行过程

这里我想强调一下,前面的知识是你日后开发IOS的基础,没有那些知识你开发IOS会很痛苦,现在很多开发人员做开发都是一知半解,程序质量确实令人担忧,所以还是希望大...

4056
来自专栏一“技”之长

iOS第三方文件压缩框架——Godzippa 原

    Godzippa是iOS开发中常用的一个第三方数据压缩框架,其采用类别的方式,为NSData类与NSFileManager类提供了压缩和解压缩数据的方法...

741
来自专栏移动端周边技术扩展

IComMediator模块化解耦

16712
来自专栏進无尽的文章

编码篇 - iOS各种权限状态的获取及注意事项

关于系统权限的获取,相信大家都不陌生,可是其中蕴含的知识确实不少。 怎样向用户索取权限是非常重要的。例如LBS类的应用,如果在索取权限时遭到用户的拒绝,那么该...

3802
来自专栏Netkiller

vsftpd FTP服务器安装与配置

本文节选自《Netkiller Linux 手札》 3.4. vsftpd - The Very Secure FTP Daemon 3.4.1. 安装 vsf...

4314
来自专栏iOS开发攻城狮的集散地

Url Scheme实现APP间通信、分享

接下来就以我之前写的UIActivityViewController系统原生分享-仿简书分享和iOS开源小项目-WSL两个Demo为例,让我们看下怎么可以让UI...

2518
来自专栏DannyHoo的专栏

SDWebImage\ASIHttpRequest是第三方库

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1063
来自专栏xx_Cc的学习总结专栏

iOS-网络编程(二)文件上传和断点离线下载

3938

扫码关注云+社区

领取腾讯云代金券