React Native Android启动白屏的一种解决方案上

我们用RN去开发Android应用的时候，我们会发现一个很明显的问题，这个问题就是启动时每次都会有1~3秒的白屏时间，直到项目加载出来

为什么会出现这个问题？

RN开发的应用在启动时，首先会将js bundle读取到内存中，然后再完成渲染。那么这段等待的时间就导致了白屏的问题。（换句话来说，这个白屏时间是程序为了完成初始化加载数据，做一些初始化工作所保留的时间，如果在这段时间中不对启动屏做一些优化，就会呈现给用户一个白屏的时间段，用户体验较差）

我们可以利用白屏做点什么？

目前我们手机上所安装的绝大部分APP在启动的时候，都会有一个启动屏，这个启动屏可以是软件的欢迎页，也有启动屏是广告的，这对于用户来说是非常友好的。

解决Android白屏的一种方案

为React Native Android添加启动屏

先不急着动刀子，来一波原理分析

通过react-native init 初始化的应用，在Android部分，有一个MainActivity，它是整个Android程序的入口。

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "RN_APP";
    }
}

通过上述代码可以看出MainActivity很干净，就一个getMainComponentName()方法。显然启动白屏不是因为MainActivity导致的。

接下来，我们就继续探索，进入ReactActivity源码一探究竟。

  /** ReactActivity.java   */
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mDelegate.onCreate(savedInstanceState);
  }

上面代码是ReactActivity的onCreate方法的代码，onCreate作为一个Activity的入口，负责着程序初始化等一系列工作。这里有两个onCreate，第一个为调用父类完成一些初始化工作，我们重点进入第二个onCreate方法中，一探究竟

  /** ReactActivityDelegate.java */
  protected void onCreate(Bundle savedInstanceState) {
    if (mMainComponentName != null) {
      loadApp(mMainComponentName);
    }
    mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
  }

真是山路十八弯，看到loadApp那一瞬间眼睛就湿了，纵里寻她千百度，就你了！

/** ReactActivityDelegate.java */
protected void loadApp(String appKey) {
    if (mReactRootView != null) {
      throw new IllegalStateException("Cannot loadApp while app is already running.");
    }
    mReactRootView = createRootView();
    mReactRootView.startReactApplication(
      getReactNativeHost().getReactInstanceManager(),
      appKey,
      getLaunchOptions());
    getPlainActivity().setContentView(mReactRootView);
  }

上述代码中，首先通过 mReactRootView = createRootView();创建一个根视图，该视图便是React Native应用的最顶部视图。

然后通过mReactRootView.startReactApplication方法，加载并渲染js bundle，此过程是比较耗时的。

最后，通过setContentView(mReactRootView);将根视图绑定到Activity界面上。

基本原理就是这些，下面我们就对ReactActivity动动刀子。