React Native integrated react-native-splash-screen (App FIG promoter)

1): download plug-ins

参考链接: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): Review android / app / src / main / java / com / package name /MainActivity.java, add the following:

+ 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): Create launch_screen.xml in app / src / main / res / layout (Without this folder please create your own), add content:

<?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): The start command to be configured to FIG launch_screen.png, into and drawable-xxx folder:

#若无此类文件夹请自行创建
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

5): Create a color name primary_dark in app / src / main / res / values ​​/ colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

6): Open android / app / src / main / res / values ​​/ styles.xml a transparent background

<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): at the entrance file called

import SplashScreen from 'react-native-splash-screen'

//生命周期函数、render渲染完成之后调用、可结合async await函数使用
componentDidMount() {

    //在显示图片时可以处理其他请求

    //隐藏图片显示
    SplashScreen.hide();
}

8): renderings and test pictures