給Android新增啟動頁

實現啟動頁基本有三種思路：

• 使用RN開源元件；
• 原生java編寫；
• 模擬啟動頁，這種方法基本就是replace路由棧；http://www.jianshu.com/p/da658aceeb44

我們之所以設定啟動頁，很大一部分原因是在啟動頁顯示的背後可以利用寶貴的時間來初始化我們的應用，啟動頁消失後，初始化的工作就應該做完。因此，使用開源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">隨遇而安</string>
</resources>

修改App的圖示

也很簡單，在android\app\src\main\res\mipmap-xxxxxx中直接覆蓋圖示就可以，注意圖示的大小。

最終效果圖：

修復Android啟動白屏的問題，後續會加上，敬請期待。。。。。