react native 配置启动屏

react-native-splash-screen

1.安装： npm i react-native-splash-screen --save

2.自动link： react-native link react-native-splash-screen

3.在MainActivity.java文件中添加如下代码：

import android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {

/**

* 设置启动页

@Override

protected void onCreate(Bundle savedInstanceState) {

SplashScreen.show(this); // 展示启动页设置代码

super.onCreate(savedInstanceState);

}

// ...other code

}

4.添加启动页图片及布局

在路径app/src/main/res/layout创建文件(如果不存在则进行手动创建)命名为 launch_screen.xml. 然后输入下面内容：

<?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>

5.在res文件夹下面创建如下文件夹，添加对应分辨率图片，分别对应放入下面文件夹,图片命名和xml中一致，命名为launch_screen

drawable-ldpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

drawable-xxxhdpi

6.在启动的过程中看到有白屏出现，我们将启动背景设置成透明背景，使用下面方式进行处理，打开android/app/src/main/res/values/styles.xml文件，并且添加 true

到文件中，添加之后结果如下所示:

</style>

</resources>

7.在App.js（入口文件处）处隐藏掉启动页

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

constructor(props) {

super(props);

// 在入口文件处隐藏掉启动页

SplashScreen.hide();

}