1.安装

npm i react-native-splash-screen --save or

yarn add react-native-splash-screen --save

2.自动配置

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

or 3.手动配置

3.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')

3.2  android/app/build.gradle

...

dependencies {

...

compile project(':react-native-splash-screen')

}

3.3 MainApplication.java

// 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 booleangetUseDeveloperSupport() {

returnBuildConfig.DEBUG;

}

@Override

protected ListgetPackages() { return Arrays.asList( newMainReactPackage(), new SplashScreenReactPackage() //here ); } }; @Override public ReactNativeHost getReactNativeHost() { returnmReactNativeHost; } }

3.4 MainActivity.java

import android.os.Bundle; // here

import com.facebook.react.ReactActivity;

// react-native-splash-screen >= 0.3.1

import org.devio.rn.splashscreen.SplashScreen; // here

// react-native-splash-screen < 0.3.1

// import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

SplashScreen.show(this); // here

super.onCreate(savedInstanceState);

}// ...other code

}

3.5 在app/src/main/res/layout下创建launch_screen.xml

3.6 在app/src/main/res/drawable/ 下加入launch_screen.png图片

3.7 设置透明背景android/app/src/main/res/values/styles.xml

true

3.8 react-native run-android失败 提示tool:replace allbackup

application节点添加

3.9 android 闪退 需要添加android/app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?> #660B0B0B

4.用法

import SplashScreen from 'react-native-splash-screen'export defaultclass WelcomePage extends Component {

componentDidMount() {

// do stuff while splash screen is shown

// After having done stuff (such as async tasks) hide the splash screen

SplashScreen.hide();

}

}