解决 React Native Android 应用启动时出现的伪启动页问题

本文旨在解决 React Native Android 应用在启动时，先显示一个带有应用图标的黑色伪启动页，然后再显示自定义启动页的问题。通过修改 Android 项目的 `styles.xml` 文件，禁用应用的预览窗口，即可有效避免此问题，提升用户体验。

在开发 React Native 应用时，为了提升用户体验，我们通常会自定义启动页（Splash Screen）。然而，在某些 Android 设备上，应用启动时可能会先显示一个黑色的伪启动页，上面只有一个应用图标，然后再显示我们自定义的启动页，这会造成不好的用户体验。 这个问题通常是由于 Android 系统在应用启动时默认会显示一个预览窗口造成的。 解决这个问题的方法很简单，只需要禁用应用的预览窗口即可。

解决方案

要解决这个问题，需要修改 Android 项目的 styles.xml 文件。该文件通常位于 android/app/src/main/res/values/ 目录下。

1. 找到 styles.xml 文件：

   在你的 React Native 项目中，找到 android/app/src/main/res/values/styles.xml 文件。

2. 禁用预览窗口：

   在 AppTheme 样式中，添加 android:windowDisablePreview 属性并将其设置为 true。

   <resources>
       <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
           <item name="android:windowDisablePreview">true</item>
           <!-- 其他样式项 -->
       </style>
   </resources>

   完整的代码示例：

   

   AIBox 一站式AI创作平台

   AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

   下载

   <resources>
       <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
           <!-- Customize your theme here. -->
           <item name="android:textColor">#000000</item>
           <item name="android:windowDisablePreview">true</item>
       </style>
   </resources>

3. 重新编译并运行应用：

   修改完成后，重新编译并运行你的 React Native 应用。现在，在 Android 设备上启动应用时，应该会直接显示自定义的启动页，而不会再出现黑色的伪启动页。

注意事项

• 确保你修改的是正确的 styles.xml 文件。 如果你的项目有多个 styles.xml 文件，请确保修改的是与你的应用主题相关的那个。

• 修改 styles.xml 文件后，需要重新编译 Android 项目才能使更改生效。

• 如果问题仍然存在，请尝试清理 Android 项目的构建缓存，然后重新构建。 可以使用以下命令：

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

总结

通过禁用 Android 应用的预览窗口，我们可以有效地解决 React Native 应用在 Android 设备上启动时出现的伪启动页问题。 这种方法简单易行，可以显著提升用户体验。 希望本文能够帮助你解决这个问题，让你的 React Native 应用在 Android 设备上拥有更好的启动体验。