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();
}
}
原文:https://www.cnblogs.com/cosyer/p/8992218.html