ReactNative 修复启动白屏

最新推荐文章于 2025-05-01 17:20:39 发布

执念1012

最新推荐文章于 2025-05-01 17:20:39 发布

阅读量607

点赞数 3

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/weixin_42059662/article/details/139065552

ReactNative 专栏收录该内容

9 篇文章

订阅专栏

做Native端开发的小伙伴都知道，应用在启动时会有短暂的白屏现象，我们可以利用插件解决此问题，这里我们主要讲ReactNative在启动时，借助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') // import 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) {
// this add line
    SplashScreen.show(this);
    super.onCreate(savedInstanceState);
}

在这里插入图片描述

IOS 配置

#import "RNSplashScreen.h"

[RNSplashScreen show];

在这里插入图片描述

打开 Xcode, 进行下图的配置
在这里插入图片描述

使用

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

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