Android12下react-native-bootsplash的windowSplashScreenBackground不生效求助

升级至React Native 0.69.5和react-native-bootsplash 4.3.2后，自定义启动页图标可正常显示，但配置的绿色背景色未生效，实际启动页背景为黑色。以下是相关配置文件：

styles.xml #

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@color/green</item>
    <item name="android:forceDarkAllowed">false</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
  </style>

  <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/green</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

colors.xml #

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green">#08ba58</color>
    <color name="black">#000000</color>
    <color name="dark_green">#08776c</color>
</resources>

AndroidManifest.xml #

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.****.****">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.permission.CAMERA"/>

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
        android:theme="@style/BootTheme"
        android:networkSecurityConfig="@xml/network_security_config">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize"
            android:exported="true"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/app_scheme"/>
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https"
                        android:host="****.****/****"/>
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https"
                        android:host="****.****/****"/>
            </intent-filter>
        </activity>
        <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/google_geo_api_key"/>
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@drawable/ic_stat_ic_notification" />
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_color"
            android:resource="@color/black"
            tools:replace="android:resource" />
        <meta-data
            android:name="com.google.android.gms.wallet.api.enabled"
            android:value="true" />
    </application>
</manifest>

MainActivity.java onCreate 实现 #

@Override
protected void onCreate(Bundle savedInstanceState) {
  RNBootSplash.init(this);
  super.onCreate(null);
}

问题原因及解决方案 #

原因

windowSplashScreenBackground 是 Android 12（API 31）及以上版本才支持的属性，若测试设备系统版本低于 Android 12，该属性不会生效，启动页会 fallback 到默认黑色背景。此外，项目构建缓存也可能导致配置未被正确加载。

解决步骤

1. 添加低版本Android兼容属性
   修改 styles.xml 中的 BootTheme，增加 android:windowBackground 属性以兼容 Android 11 及以下版本：

<style name="BootTheme" parent="Theme.SplashScreen">
    <item name="android:windowBackground">@color/green</item> <!-- 兼容低版本Android -->
    <item name="windowSplashScreenBackground">@color/green</item> <!-- Android 12+ -->
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

2. 清理构建缓存
   进入 Android 目录执行清理命令，再重新构建项目：

cd android && ./gradlew clean
cd .. && npx react-native run-android

3. 验证资源生成（可选）
   确保已正确运行 react-native-bootsplash 的资源生成命令（若之前未执行或资源有变更）：

npx react-native generate-bootsplash path/to/your/logo.png --background-color #08ba58

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