iOS端Capacitor SplashScreen背景色不生效问题及配置咨询

你遇到的启动初期1-2秒黑屏、backgroundColor配置不生效的问题，核心原因是Capacitor的backgroundColor仅控制WebView加载完成后启动屏的背景色，而启动初期的黑屏是原生系统窗口的背景，需要分别修改Android和iOS的原生项目配置来解决。

一、确认capacitor.config.json基础配置 #

当前配置可保留，注意该文件中的backgroundColor仅作用于WebView加载后的启动屏阶段：

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": true,
      "launchFadeOutDuration": 3000,
      "backgroundColor": "#DF993E"
    }
  }
}

二、Android平台配置（解决黑屏+设置启动背景色） #

1. 打开Android项目的android/app/src/main/res/values/styles.xml文件
2. 找到启动主题（通常为AppTheme.NoActionBar），添加或修改android:windowBackground属性：

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 替换为目标背景色的引用 -->
    <item name="android:windowBackground">@color/splash_bg</item>
</style>

3. 在android/app/src/main/res/values/colors.xml中定义颜色值：

<color name="splash_bg">#DF993E</color>

4. 重新编译Android项目，启动后即可看到启动阶段背景色生效，黑屏问题解决。

三、iOS平台配置（解决黑屏+设置启动背景色） #

1. 打开iOS项目的LaunchScreen.storyboard文件
2. 在Interface Builder中选中最底层的根视图（覆盖整个屏幕的View）
3. 在右侧Attributes Inspector面板中，找到Background选项，设置为目标颜色#DF993E
4. 若使用Launch Images而非Storyboard，需更新所有尺寸的启动图背景为目标颜色（优先推荐Storyboard方式）

关键说明 #

• 原生启动窗口背景色与Capacitor插件的backgroundColor是独立配置项：前者控制App启动到WebView初始化完成前的显示，后者控制WebView加载后启动屏的背景。
• 修改原生配置后，需执行npx cap sync同步项目，再重新编译。

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