React Native 0.61 闪屏页前出现2秒启动白屏如何解决

问题根本原因 #

你遇到的白屏分为两个阶段：

• 第一阶段：Android原生应用启动到JS bundle加载完成前，原生层无有效渲染内容，你配置的android:windowDisablePreview=true禁用了系统启动预览窗，导致这段时间直接显示空白
• 第二阶段：JS初始化逻辑阻塞了应用初始化触发时机，拉长了白屏持续时间

具体修复步骤 #

1. 替换错误的Android主题配置 #

删除之前添加的<item name="android:windowDisablePreview">true</item>，改为配置和闪屏样式一致的启动预览窗，让原生启动阶段直接显示和闪屏一致的内容，无缝衔接JS层渲染：
打开android/app/src/main/res/values/styles.xml，在App主题中添加如下配置：

<!-- 闪屏背景，和你JS层闪屏的背景保持完全一致 -->
<item name="android:windowBackground">@drawable/splash_background</item>
<!-- 可选：全屏显示，和闪屏样式匹配 -->
<item name="android:windowFullscreen">true</item>
<item name="windowNoTitle">true</item>

在android/app/src/main/res/drawable目录下新建splash_background.xml，配置闪屏的具体样式，示例如下（根据你的实际闪屏调整颜色、logo）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景色 -->
    <item android:drawable="@color/your_splash_bg_color" />
    <!-- 中间logo -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/your_splash_logo" />
    </item>
</layer-list>

2. 优化JS初始化逻辑，减少阻塞 #

你当前的代码中，FCM注册的异步操作全部阻塞了InitializApp的调用，拉长了闪屏渲染等待时间，调整componentDidMount逻辑，让应用初始化和FCM注册并行执行：

async componentDidMount() {
  // 优先触发应用初始化，不阻塞后续FCM逻辑
  this.props.InitializApp();

  /*************************************
   *       Push Notification
   *************************************/
  fcmService.requestPermission();
  // FCM逻辑后台执行，不阻塞主界面渲染
  fcmService.registerAppWithFCM().then(() => {
    fcmService.register(
      onRegister,
      onNotification, // inapp notification
      onOpenNotification, // from notification center
    );
  })

  // 剩余onRegister、onNotification、onOpenNotification逻辑保持不变
  // ...
}

可选优化方案（完全消除白屏） #

如果需要更稳定的闪屏体验，可使用原生层控制的闪屏方案：

• 接入react-native-splash-screen库，在原生层配置闪屏，等JS层所有初始化完成后再调用隐藏闪屏的API，完全避免JS加载阶段的空白问题

内容的提问来源于stack exchange，提问作者user16350114