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動動刀子。