ReatcNative 修复启动白屏本文已参与【新人创作礼】活动，一起开启掘金创作之路。 ReatcNative 修复启

本文已参与【新人创作礼】活动，一起开启掘金创作之路。

ReatcNative 修复启动白屏

在启动RN项目时候，会默认有一个启动白屏，卡着很难看。我们使用 react-native-splash-screen来修复这个问题

安装

  
   npm install react-native-splash-screen --save
   
   cd ios && pod install

配置使用

Android

首先在 anroid/app/build.gradle中添加下面的配置


dependencies {

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

在 android/res/* 下面添加 layout 文件夹，在里面添加 launch_screen.xml,其次在 android/res/* 下面添加 drawable 文件夹📂，这里存放你的启动页（注意📢，这里可以根据像素设置文件夹，例如drawable-hdpi）会按照设备大小适配。 drawable/launch_screen.png

 <!-- launch_screen.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="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

上面的配置好以后，在android/values文件夹📂下新建 colors.xmnl

<!-- colors.xml 这里用来设置配色 -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

再去修改 values/styles.xml

<!-- 设置背景透明 -->
<item name="android:windowIsTranslucent">true</item>

上面的配置文件修改好后，我们来写java代码，在项目 android/app/scr/main/res/*, 来修改

// MainActivity.java
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;


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

在 AppDelegare.m 文件中添加下面的配置


#import "RNSplashScreen.h"

[RNSplashScreen show];

打开 Xcode, 进行下图的配置

使用

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

setTimeout(() => {
        SplashScreen.hide();
}, 2500);