React Native集成react-native-splash-screen(App启动图)

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):效果图及测试图片