1):下载插件
参考链接:https://github.com/crazycodeboy/react-native-splash-screen
#安装依赖
npm i react-native-splash-screen --save
#链接依赖库、若链接失败请再次执行npm install命令后重新链接
react-native link react-native-splash-screen
2):修改android/app/src/main/java/com/包名/MainActivity.java,添加如下内容:
+ import android.os.Bundle;
+ // react-native-splash-screen >= 0.3.1
+ import org.devio.rn.splashscreen.SplashScreen;
+ // react-native-splash-screen < 0.3.1
+ import com.cboy.rn.splashscreen.SplashScreen;
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ SplashScreen.show(this); // here
+ super.onCreate(savedInstanceState);
+ }
3):在app/src/main/res/layout(若无此文件夹请自行创建)下创建launch_screen.xml、添加内容为:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/launch_screen"
android:scaleType="centerCrop" />
</RelativeLayout>
4):将需要设置的启动图命令为launch_screen.png、并放到drawable-xxx文件夹下:
#若无此类文件夹请自行创建
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
5):在app/src/main/res/values/colors.xml创建一个名primary_dark的颜色
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary_dark">#000000</color>
</resources>
6):打开android/app/src/main/res/values/styles.xml 设置透明背景
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!--设置透明背景-->
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>
7):在入口文件调用
import SplashScreen from 'react-native-splash-screen'
//生命周期函数、render渲染完成之后调用、可结合async await函数使用
componentDidMount() {
//在显示图片时可以处理其他请求
//隐藏图片显示
SplashScreen.hide();
}
8):效果图及测试图片