正常情況下react-native開發的應用，從點擊打開APP的那一刻起，一直會顯示白屏直到所有的內容加載完成，才會完整的呈現所有的內容，這個時間長短的過程取決與網絡傳輸時間，但是一般情況即便是開發環境中也要等大概0.5至1秒鐘左右的白屏等待時間，這是非常不良好的體驗，啟動頁不僅僅是替代白屏的效果，對增加企業品牌特效，因此啟動頁顯得尤為重要。

react-native官方旨在于提供基礎組件，很多app的特效功能都需要結合java來實現或者結合開源插件來實現，因此學習這項技術積累的是特效實現和框架結構代碼合理組織，往后都是以一個組件或者一個特效為目標進行記錄。

react-native-splash-screen

react-native框架沒有提供啟動頁實現，因此需要到網上去找一個開源的插件，我找到的是react-native-splash-screen，它是java擴展實現，下面是安裝過程。

1. 進入項目目錄

C:\Users\zhengtong>cd C:\Users\zhengtong\WebstormProjects\rn_practice

2. 下載插件

C:\Users\zhengtong\WebstormProjects\rn_practice>npm i react-native-splash-screen --save

3. 自動安裝

C:\Users\zhengtong\WebstormProjects\rn_practice>react-native link react-native-splash-screen

4. 創建launch_screen.xml文件

# 創建目錄
C:\Users\zhengtong\WebstormProjects\rn_practice>mkdir android/app/src/main/res/layout/

# 進入layout目錄
C:\Users\zhengtong\WebstormProjects\rn_practice>cd android/app/src/main/res/layout/

# 編輯文件(dos命令行我不知道如何編輯, 所以我直接列出文件內容)
C:\Users\zhengtong\WebstormProjects\rn_practice\android\app\src\main\res\layout>vim launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical" android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@drawable/launch_screen">

</LinearLayout>

5. 檢查：啟動頁圖片
安裝好react-native-splash-screen之后，默認情況下，會創建這兩個目錄drawable-xhdpi、drawable-xxhdpi，路勁為C:\Users\zhengtong\WebstormProjects\rn_practice\android\app\src\main\res，這兩個目錄分別存放著兩張分辨率不一樣大小的相同圖片，用于在不同手機上顯示，可以通過替換這兩張圖片來顯示自己想要的啟動頁。

6. 檢查：配置文件
android\settings.gradle

rootProject.name = 'rn_practice'

include ':app'
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

android\app\build.gradle

dependencies {
    compile project(':react-native-splash-screen')   # 確認存在, 如果不存在則需要手動增加這行。
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

android\app\src\main\java\com\rn_practice\MainApplication.java

package com.rn_practice;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.cboy.rn.splashscreen.SplashScreenReactPackage;  // HERE
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new SplashScreenReactPackage()     // HERE
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

android\app\src\main\java\com\rn_practice\MainActivity.java

package com.rn_practice;

import android.os.Bundle;

import com.facebook.react.ReactActivity;
import com.cboy.rn.splashscreen.SplashScreen;   // HERE

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "rn_practice";
    }

    @Override                                                   // HERE
    protected void onCreate(Bundle savedInstanceState) {        // HERE
        SplashScreen.show(this, true);                          // HERE
        super.onCreate(savedInstanceState);                     // HERE
    }                                                           // HERE
}

編寫項目代碼

index.android.js

import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import { AppRegistry, View, Text, StatusBar, Navigator, TouchableHighlight } from 'react-native';
const sleep = require('es6-sleep').promise;

export default class NavAllDay extends Component {

    async sleep(milliansecond) {
        await sleep(milliansecond);
    }

    async componentDidMount() {
        // do anything while splash screen keeps, use await to wait for an async task.
        await sleep(2000);
        await SplashScreen.hide();
    }

    render() {
        const routes = [ {title: 'First Scene', index: 0}, {title: 'Second Scene', index: 1}, ];
        return (
            <View style={{flex: 1}}>
                <Text>Hello World</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent('rn_practice', () => NavAllDay);

componentDidMount()是react-native中的一個生命周期組件，專門處理當所有的組件都已經加載完畢之后，做一些事情。

效果圖

效果圖