React Native Android端react-native-bootsplash启动页背景图显示异常求助

你遇到的确实是双重启动页问题，原因是同时使用了BootSplash内置主题配置和单独设置android:windowBackground，导致启动流程分两步：先显示BootSplash生成的背景色+Logo页面，待其隐藏后才显示你设置的windowBackground背景图。

解决步骤： #

把背景图、背景色和Logo整合到同一个layer-list中，替换BootSplash的默认配置，让整个启动页一次性显示。

1. 修改styles.xml
   移除BootTheme中的bootSplashBackground和bootSplashLogo，只保留android:windowBackground和postBootSplashTheme：

<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="android:windowBackground">@drawable/bootsplash</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
    </style>

</resources>

2. 更新drawable/bootsplash.xml
   在layer-list中添加背景色和Logo，让它们和背景图叠加显示：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层背景色（如果背景图完全覆盖屏幕可省略） -->
    <item android:drawable="@color/bootsplash_background" />
    <!-- 中间层背景图 -->
    <item>
        <bitmap
            android:gravity="fill"
            android:src="@drawable/splash" />
    </item>
    <!-- 顶层Logo -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/bootsplash_logo" />
    </item>
</layer-list>

原理说明： #

BootSplash的Theme.BootSplash本质是通过windowBackground控制启动页显示的，你之前额外设置bootSplashBackground和bootSplashLogo会让BootSplash生成临时启动页视图，当它隐藏后才会显示自定义的windowBackground，从而造成先后显示的双重启动页问题。现在把所有元素整合到一个layer-list中，让BootSplash直接加载完整的启动页布局，就能实现背景图和Logo同步显示的效果。

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