react-native splash page android

I recently worked on a project, and I needed to use the startup page to solve the startup white screen, so I did it. Although there are a lot of tutorials on the Internet, I still stepped on a lot of pits. Now I have it out, and record it.

Below is the GitHub address of the plugin

https://github.com/crazycodeboy/react-native-splash-screen

1、npm i react-native-splash-screen --save

2,react-native link react-native-splash-screen orrnpm link react-native-splash-screen

安装完成后查看 android/settings.gradle 文件有没有下面这两行代码，没有就添加上

project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

include ':react-native-code-push'

3、查看android/app/build.gradle 文件是否有一下代码

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

4、查看android\app\src\main\java\com[your project’s name]\MainApplication.java文件，根据版本号引入不同jar包

// 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;

下面是我自己的，你们要根据版本号引入

之后在图中的位置加上

new SplashScreenReactPackage()  这句代码

5、查看android\app\src\main\java\com[your project’s name]\MainActivity.java文件，引入两个jar包

import android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;

Write the code in the red box, complete it if you have it, and add it if you don't

@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}

6. Create a new layout folder in the android\app\src\main\res folder, then create a new launch_screen.xml file in the layout (the file name must be this name and do not change it), and add it in the launch_screen.xml file The following code

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/launch_screen"></LinearLayout>

7. Prepare a picture displayed during loading named launch_screen.png (the picture name must be this name and do not change it) and put it in the file android\app\src\main\res\drawable-xx.

For Android, you only need to create a folder as shown in the figure below, because Android will automatically scale

8. Introduce import SplashScreen from 'react-native-splash-screen' in the home page

Execute the closing startup page in the life cycle function.

9. The basic steps have been completed, but an error is reported when packaging

The reason is a bit complicated, and I don't understand it, but the online god found a solution. Let's go to the file android\app\src\main\AndroidManifest.xml to modify things and add a line of code

tools:replace="android:allowBackup"

Then you can bind it

At this point, the startup page is OK. There are many reasons for the failure. The version and the details may lead to all kinds of strange errors. I hope everyone goes well.

react-native splash page android

Guess you like