React Native 启动白屏问题解决方案,教程

问题描述：

用React Native架构的无论是Android APP还是iOS APP，在启动时都出现白屏现象，时间大概1~3s（根据手机或模拟器的性能不同而不同）。

问题分析：

为什么会产生白屏？

React Native应用在启动时会将js bundle读取到内存中，并完成渲染。这期间由于js bundle还没有完成装载并渲染，所以界面显示的是白屏。

白屏给人的感觉很不友好，那有没有办法不显示白屏呢？

上文解释了：为什么React Native应用会在启动的时候显示一会白屏。既然知道了出现问题的原因，那么离解决问题也不远了。市场上大部分APP在启动的时候都会有个启动屏，启动屏对于用户是比较友好的，一来展示欢迎信息，二来显示一些产品信息或一些广告，启动页对于程序来说，是为程序完成初始化加载数据，做一些初始化工作的所保留的时间，启动屏等待的时间可长可短，具体根据业务而定。

下面我就教大家如何给React Native 应用添加启动屏，并解决启动白屏的问题。

Android启动白屏解决方案

我们可以通过为React Native Android应用添加启动屏的方式，来解决启动白屏的问题。我在《React Native Android启动屏，启动白屏，闪现白屏》一文中介绍过一种为React Native Android应用添加启动屏的方法， 不过那种方法虽好，但牵扯到对React Native 源码的修改，如果React Native 版本有更新还需要对源码做一些处理，所以以后维护起来不是很方便。

下面就向大家介绍另外一种为React Native Android应用添加启动屏的方案。

在《React Native Android启动屏，启动白屏，闪现白屏》一文中 我们使用的是在根视图容器上添加一个视图作为启动屏，当js bundle加载并渲染完成后，再将添加的视图从根视图上移除。在根视图上添加一个视图的方式其实就是为了遮挡白屏，既然是遮挡白屏，我们是不是可以弹出一个对话框呢？

小伙伴们肯定会说，对话框也不是全屏啊，主题也不一样啊，不过没关系，既然我们可以添加对话框，那么我们就可以修改对话框的样式来达到我们需要的效果。

要达到启动屏的效果，我们需要一个什么样效果的对话框呢？

1. 在APP启动的时候显示；
2. 在js bundle加载并渲染完成后消失；
3. 全屏显示；
4. 显示的内容可以通过 layout xml 进行修改；

上述是我们对这个对话框的基本需求，现在就让我们来实现这一需求：

第一步，创建一个对话框组件SplashScreen

为满足上述需求，对话框组件需要提供下面两个方法：

1.显示对话框的方法:

/**
 * 打开启动屏
 */
public static void show(final Activity activity,final boolean fullScreen) {
    
    if (activity == null) return;
    mActivity = new WeakReference<Activity>(activity);
    activity.runOnUiThread(new Runnable() {
    
        @Override
        public void run() {
    
            if (!activity.isFinishing()) {
    

                mSplashDialog = new Dialog(activity,fullScreen? R