我們之所以設定啟動頁，很大一部分原因是在啟動頁顯示的背後可以利用寶貴的時間來初始化我們的應用，啟動頁消失後，初始化的工作就應該做完。因此，使用開源RN元件是比較靠譜的，閒言少敘，直奔主題！

1. 安裝 npm install --save rn-splash-screen
2. 連線 react-native link rn-splash-screen
3. 在res檔案中新建drawable資料夾，放置splash.png;
4. 修改android/app/src/main/res/values/styles.xml檔案，新增一行：

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"
    
   >
    + <item name="android:windowBackground">@drawable/splash</item>
   </style>

   5.修改android/app/src/main/AndroidManifest.xml檔案：

android:name=".MainApplication"
        android:allowBackup="true"
        android:label="@string/app_name"
 -      android:icon="@mipmap/ic_launcher"
 -      android:theme="@style/AppTheme"
 
>
 +      android:icon="@mipmap/ic_launcher">
        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
 +        android:theme="@style/AppTheme"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
          <intent-filter>
              <action android:name="android.intent.action.MAIN"
 
 />

6.修改Android/app/src/main/Java/com/APPNAMES/MainActivity.java檔案：

import android.graphics.Color;
import android.os.Bundle;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.mehcode.reactnative.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
  // [...]

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      // Show the js-controlled splash screen
      SplashScreen.show(this, getReactInstanceManager());

      super.onCreate(savedInstanceState);

      // [...]
  }

  // [...]
}

7.在入口檔案中測試：

rn-splash-screen提供了兩個API，open()和hide()。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
// 引入引導頁元件
import SplashScreen from 'rn-splash-screen';

export default class splashTest extends Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount() {
    setTimeout(() => {
      SplashScreen.hide();
    }, 2000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('splashTest', () => splashTest);

注意：React-native run-android過程中很一直報錯，如果按照以上方法修改的話，是沒有問題的（RN 0.43），有效的辦法是編譯之前刪除android\app\build資料夾下的四個資料夾，這樣就不會重複報錯了。

修改APP得名字：直接開啟android/app/src/main/res/values/strings.xml，即可看到配置中的app_name，修改為你想要的即可:

<resources><string name="app_name">Hello</string></resources>

修改APP得圖示在android\app\src\main\res\mipmap-xxxxxx中直接覆蓋圖示就可以，注意圖示的大小。

最終效果圖：

最後附上大神關於優化噠方案：

2. 設定SplashScreen

參考：安卓白屏優化 

##################################################

效能優化

1.探索react native首屏渲染最佳實踐