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启动屏就完成了