react-native-splash-screen android 啟動頁實現，以及遇到問題解決方案

實現啟動屏的三個步驟

1、在APP啟動的時候顯示；

2、在js bundle加載並渲染完成后消失；

3、顯示的內容可以通過 layout xml 進行修改；

第一步：下載安裝

yarn add react-native-splash-screen

第二步修改android文件

1、在android/settings.gradle文件中加入(通常yarn add安裝完，這些內容會自動生成，如果沒有，可以手動添加)

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文件中加入(通常yarn add安裝完，這些內容會自動生成，如果沒有，可以手動添加)

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

3、修改android\app\src\main\java\com\studyimooc_gp\MainApplication.java(通常yarn add安裝完，這些內容會自動生成，如果沒有，可以手動添加)

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

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()  //加入這一行
            );
        }
    };

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

4、修改android\app\src\main\java\com\studyimooc_gp\MainActivity.java（重點來了）

 

package com.studyimooc_gp;

import android.content.pm.PackageManager;
import android.os.Bundle;
import android.support.annotation.NonNull;
import org.devio.rn.splashscreen.SplashScreen; // 1.導入啟動屏包
import android.support.v4.app.ActivityCompat;
import android.widget.Toast;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this); // 2. 顯示啟動方法
        super.onCreate(savedInstanceState);
        ActivityCompat.requestPermissions(this, new String[]{android
        .Manifest.permission.WRITE_EXTERNAL_STORAGE}, 1);
    }

 

5、新建android\app\src\main\res\layout 文件，並在文件夾中新建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>

6、新建android\app\src\main\res\drawable-hdpi文件夾,把啟動頁圖片放進去，命名為launch_screen.png

7、如果你只做了以上步驟，你的程序會閃屏后退出，所以你需要在android\app\src\main\res\values\colors.xml文件中加入

<color name="primary_dark">#660B0B0B</color>

做了以上步驟android啟動屏就完成了