React Native Bootsplash启动页logo显示异常，求解决方案

我已安装react-native-bootsplash组件，但启动页并未显示我的自定义logo，而是呈现出一个内凹的圆形图像。

以下是我的相关配置代码：

AndroidManifest.xml #

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

    <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">
      <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">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>

styles.xml #

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

    <style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>

</resources>

MainActivity.java #

package com.app;
import android.os.Bundle; 
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;
import com.zoontek.rnbootsplash.RNBootSplash;
public class MainActivity extends ReactActivity {
   
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "app";
  }

  /**
   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
   * (aka React 18) with two boolean flags.
   */
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new DefaultReactActivityDelegate(
        this,
        getMainComponentName(),
        // If you opted-in for the New Architecture, we enable the Fabric Renderer.
        DefaultNewArchitectureEntryPoint.getFabricEnabled());
  }

   @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this, R.style.BootTheme); // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
  }
}

解决步骤 #

1. 确认Logo资源是否正确生成并放置

   • 使用官方提供的react-native generate-bootsplash命令生成适配多分辨率的Logo资源，而非手动复制文件。命令示例：

     npx react-native generate-bootsplash path/to/your-logo.png \
       --background-color=#FFFFFF \
       --logo-width=100 \
       --assets-path=assets \
       --flavor=main
     

   • 检查android/app/src/main/res/drawable-*目录下是否存在生成的bootsplash_logo.png系列文件，确保没有遗漏分辨率文件夹。

2. 验证资源引用是否正确

   • 确认styles.xml中bootSplashLogo引用的@drawable/bootsplash_logo与生成的资源文件名完全匹配（Android资源文件名区分大小写）。
   • 手动添加资源时，需将Logo放在drawable目录（而非mipmap），且使用格式正常的PNG图片，避免透明通道或格式问题导致显示异常。

3. 清理并重建项目

   • 执行以下命令清理缓存和构建文件，避免旧缓存导致资源不更新：

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

4. 检查Theme配置

   • 确保BootTheme的父主题是Theme.BootSplash，不要错误继承其他主题，避免覆盖启动页布局逻辑。
   • 若需自定义Logo尺寸，可在BootTheme中添加属性调整：

     <item name="bootSplashLogoWidth">200dp</item>
     <item name="bootSplashLogoHeight">200dp</item>
     

5. 确认初始化顺序

   • 确保MainActivity.java中RNBootSplash.init()调用在super.onCreate(savedInstanceState)之前，这是官方要求的启动页加载顺序。

内容的提问来源于stack exchange，提问作者Depak kumarasan .C