React Native Bootsplash 导致底部栏出现在 Android 上，但不出现在 iOS 上

Question

我在我的项目中使用 React Native Bootsplash。启动画面在 iOS 上完美运行，但我在 Android 上遇到问题。具体来说，当我在 Android 上运行应用程序时，屏幕上会出现一个底部栏，而在 iOS 上则不会出现。

MainActivity.kt中的相关代码如下：

package com.packageName

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {

    override fun getMainComponentName(): String = "packageName"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onCreate(savedInstanceState: Bundle?) {
        RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
        super.onCreate(null) // super.onCreate(null) with react-native-screens 
    }
}

这是我的 styles.xml （android -> src -> main -> res ->values -> 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>
        <item name="android:forceDarkAllowed">false</item>
    </style>

    <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
    <style name="BootTheme" parent="Theme.BootSplash">
        <item name="bootSplashBackground">@color/bootsplash_background</item>
        <item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
    </style>


</resources>

图片有问题

我的设置： 反应本机版本：0.74.1 React Native Bootsplash：6.3.1

当我从 MainActivity.kt 中删除 onCreate 函数时，底部栏消失，但是，当然，启动屏幕不再按预期工作。

我还尝试简化闪屏后的组件以隔离问题。这是我测试的代码：

index.js 文件

const Comp = () => {
  BootSplash.hide({fade: true});
  return <View style={{flex: 1, backgroundColor: 'red'}}></View>;
};

// AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => Comp)

我看到一些建议表明这可能与“safe-area-inset-*”规则或布局行为有关。不幸的是，我无法连接调试器来直接检查渲染细节。我还在物理 Android 设备上进行了测试，以排除模拟器特定的渲染故障，但问题仍然存在。

如果我删除

<item name="bootSplashBackground">@color/bootsplash_background</item>
<item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
<item name="postBootSplashTheme">@style/AppTheme</item>

来自 styles.xml（android -> src -> main -> res ->values -> styles.xml），我的屏幕看起来像 image。
在底部出现填充的地方，我们可以看到 BootSplash 的一部分。

我还在物理 Android 设备上进行了测试，以排除模拟器特定的渲染故障，但问题仍然存在。

Answer 1

此问题在 Android 上的 React Native BootSplash 中很常见，通常源于如何在 styles.xml 中设置 BootTheme，以及可能如何在 Android 上处理系统插入或安全区域。让我们通过一些故障排除步骤和建议来解决底部栏和插图问题。

1. 使用 Theme.BootSplash.EdgeToEdge 您使用 Theme.BootSplash 作为 BootTheme 的父级。切换到 Theme.BootSplash.EdgeToEdge，它旨在通过边缘到边缘扩展内容来处理 Android 上的全屏体验，特别是在布局插图（状态栏、导航栏）可见的情况下。

在 styles.xml 中更改此设置：

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

2. 调整MainActivity布局 有时，在 MainActivity.kt 中添加 WindowCompat.setDecorFitsSystemWindows(window, false) 可以帮助消除系统插入可能导致的填充。这行代码指示 Android 忽略系统插入（如底部栏）并允许内容完全延伸到屏幕边缘。

将其添加到您的

onCreate

方法中：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    RNBootSplash.init(this, R.style.BootTheme)
}

这通常可以解决布局填充问题。

3. 检查安全区域视图或插图 如果您在 React Native 组件中使用任何

   SafeAreaView

   或类似的插图，请检查它们在隐藏启动屏幕后是否没有向布局应用额外的填充或边距。这通常会出现在您的主要组件布局中，这可能会影响可见区域。

4. 在 Android 上测试全屏标志 另一种方法是通过直接修改布局标志将应用程序设置为全屏。要确保启动屏幕和后续屏幕占据全屏，请在

   MainActivity.kt

   中使用这些标志：

将此添加到

RNBootSplash.init(...)

之后：

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                                      View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                                      View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                                      View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                                      View.SYSTEM_UI_FLAG_FULLSCREEN or
                                      View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY

这应该确保您的启动屏幕显示时没有任何额外的底栏或填充。

5. 清洁和重建 进行这些调整后，清除构建缓存并重建项目：

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

• 在

  Theme.BootSplash.EdgeToEdge

  中使用

  styles.xml

  。
• 在

  WindowCompat.setDecorFitsSystemWindows(window, false)

  中添加

  MainActivity.kt

  。
• 确保没有

  SafeAreaView

  或

  Insets

  组件造成额外的填充。
• 根据需要在

  MainActivity.kt

  中设置全屏标志。

这应该有帮助