react-native 啟動頁（react-native-splash-screen）

用於解決iOS和Android啟動白屏問題及簡單的啟動頁面展示

下載 react-native-splash-screen

yarn add react-native-splash-screen

react-native link react-native-splash-screen

android 配置：

檢查配置：

1、android\settings.gradle

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

如圖：

2、android\app\build.gradle

dependencies {
  compile project(':react-native-splash-screen')
  .....      
}

3、android/app/src/main/java/com/.../MainApplication.java

import org.devio.rn.splashscreen.SplashScreenReactPackage;

new SplashScreenReactPackage(),

以上3步都是 在link 之后就自動加上了的

4、在android/app/src/main/java/com/.../MainActivity.java文件下添加以下代碼

...
import android.os.Bundle;  //add 
import org.devio.rn.splashscreen.SplashScreen; //add
...
public class MainActivity extends ReactActivity {
...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);   //add
        super.onCreate(savedInstanceState);
    }
}

5、然后在android/app/src/main/res文件夾下創建 layout 文件夾，並在下面  啟動頁的XML文件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="@mipmap/launch_screen"> //該路徑為后面設置的啟動圖片位置
</LinearLayout>

6、以上運行后即可展示出啟動頁面,但仍有白屏閃過在android/app/src/main/res/values/styles.xml加入代碼

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        <item name="android:windowIsTranslucent">true</item> //用於設置透明白背景
        ...
    </style>

</resources>

ios 配置：

　　在AppDelegate.m文件中加入如下代碼

...
#import "SplashScreen.h"     //引入頭文件
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
..
  [SplashScreen show];   // 啟動后進入啟動頁
  return YES;
}

@end

2.設置啟動圖片來源 此處忽略不記錄了，之前已經記錄過了

然后就是在react-native 中使用了，在需要關閉的地方關閉啟動頁就行了了

import SplashScreen from 'react-native-splash-screen';

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

.