react-native-splash-screen

用于解决iOS和Android启动白屏问题及简单的启动页面展示
参考链接：react-native-splash-screen初探

一、自动下载安装

1.在项目根目录下运行yarn add react-native-splash-screen
2.在项目根目录下运行react-native link react-native-splash-screen

二、配置android

在MainActivity.java文件下添加以下代码

import android.os.Bundle;  //add 
import org.devio.rn.splashscreen.SplashScreen; //add

public class MainActivity extends ReactActivity {

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

然后在android/app/src/main/res/layout文件夹下创建启动页的XML文件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:background="@drawable/launch_screen"
    android:layout_height="match_parent">
</LinearLayout>

接着在android/app/src/main/res/drawable文件夹下添加launch_screen图片

三、以上运行后还会有白屏现象

在android/app/src/main/res/values/styles.xml加入代码

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowIsTranslucent">true</item>//add 用于设置透明白背景
        <!-- Customize your theme here. -->
    </style>

</resources>

四.配置ReactNative

在需要关闭启动页的js文件中引入import SplashScreen from ‘react-native-splash-screen’
然后在关闭处添加代码SplashScreen.hide
例如:

componentDidMount(){
    setTimeout(()=>{SplashScreen.hide()}, 1000, )
  }