react+native android 启动白屏处理

使用  react-native-splash-screen  插件

参考：https://www.npmjs.com/package/react-native-splash-screen

1.安装：

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

          react-native link react-native-splash-screen 或者rnpm link react-native-splash-screen

2.检查插件安装是否完成

      1.目录  android/settings.gradle

       include ':react-native-splash-screen'   

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

      2.android/app/build.gradle

      dependencies {

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

        ......｝

      3.配置：android/app/src/main/java/com/[project Name]/MainActivity.java 

     import android.os.Bundle; //add 处理白屏

     import org.devio.rn.splashscreen.SplashScreen; //add 处理白屏

      //如果没有这个方法  就添加进去

       protected void onCreate(Bundle savedInstanceState) {

          SplashScreen.show(this); // <--添加这一句

       super.onCreate(savedInstanceState);

      }

     4.配置白屏时显示的界面

        android/app/src/res 目录下新建layout文件夹 新建 launch_screen.xml 文件   

          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="@mipmap/ic_launcher_round" android:scaleType="centerCrop" />
</RelativeLayout>

    

  这里的：android:src="@mipmap/ic_launcher_round"  就是配置显示的图片  可以根据自己的需要修改

然后修改   android/app/src/res/values 下的styles.xml

  

<resources>

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

</resources>

 

最后在 初始页面中导入

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

componentDidMount(){
    
   //页面挂载完成隐藏
   SplashScreen.hide();

｝