iOS启动闪白屏问题完美解决方案：react-native-launch-image

tdzl2003

由于RN首次启动的时候，需要加载整个bundle，再render出首页面，这个过程通常需要耗费总计几百毫秒到一两秒不等。在默认工程中，这个过程中给用户展示出的都是白色的背景，因此用户会感觉到屏幕有一小段时间的白屏，从而影响用户体验。

为了解决这个问题，我们寻找了一些方法，最后推出了这个开源组件。

安装

如果你之前没有用过rnpm，请先安装rnpm

npm install rnpm -g

在你的工程下运行命令，安装并连接react-native-launch-image模块

npm install react-native-launch-image
rnpm link react-native-launch-image

然后修改你的AppDelegate.m


#import "AppDelegate.h"

#import "RCTRootView.h"
#import "RNLaunchImage.h"  // <-- 加入这一行

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code
    
    [RNLaunchImage wait];   // <-- 加入这一行。这必须是这个方法return之前的最后一行
    return YES;
}

@end

这样，你的启动画面就会一直保持，直到你主动将它关闭。通常我们这么写：

import * as launchImage from 'react-native-launch-image';

class App extends React.Component {
    async componentDidMount(){
        // 随便做点什么，包括可以用await去做异步调用。
        launchImage.hide();
    }
}

直到launchImage.hide();被调用之前，启动画面会一直保持在屏幕上，这样你的用户就不会看到难看的白屏了！

sunnyof

感谢 🙏，另外问下启动图在哪里设置呢？

晴明

@sunnyof http://bbs.reactnative.cn/topic/1850/react-native-ios-设置-launchscreen

sunnyof

@sunnylqm 大神，在哪里都能看到你回到问题的身影。。。

sunnyof

@sunnylqm 这个是 ios 的，请问 android 的启动白屏有解决办法吗？