Ionic React App用Capacitor打包iOS后状态栏颜色异常问题求解

报错原因说明 #

你遇到的Cannot find 'splitViewController' in scope报错并非缺少依赖导致：你引用的苹果论坛代码仅适用于自带UISplitViewController的原生iOS项目，Capacitor生成的项目结构中没有预先定义该变量，直接拷贝代码才会触发作用域错误。

推荐解决方案（按操作复杂度从低到高排序） #

方案1：全局静态配置（完全无需修改Swift代码） #

直接修改iOS项目的Info.plist配置即可全局生效，操作最简单：

• 打开Xcode中ios/App/App/Info.plist文件
• 添加如下两个配置项：
  • 键：UIViewControllerBasedStatusBarAppearance，类型：Boolean，值：NO
  • 键：UIStatusBarStyle，类型：String，值：UIStatusBarStyleDarkContent
• 重新编译运行后，全局状态栏文字会变为黑色，适配白色背景

方案2：仅修改少量AppDelegate代码（可自定义状态栏背景色） #

删除原有报错的splitViewController相关代码，替换为如下代码即可：

import UIKit 
import Capacitor 
import Firebase

@UIApplicationMain 
class AppDelegate: UIResponder, UIApplicationDelegate { 
    var window: UIWindow? 
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { 
        FirebaseApp.configure() 
        // 以下为新增状态栏配置代码
        // 1. 设置状态栏文字为黑色
        application.statusBarStyle = .darkContent
        // 2. 如果需要修改状态栏背景色，添加下面这段代码即可
        if let statusBarFrame = window?.windowScene?.statusBarManager?.statusBarFrame {
            let statusBarView = UIView(frame: statusBarFrame)
            statusBarView.backgroundColor = .lightGray // 可替换为你需要的任意背景色
            window?.addSubview(statusBarView)
        }
        return true 
    }
    // ... 其余原有代码保持不变
}

方案3：前端动态控制（适合需要在不同页面切换状态栏样式的场景） #

直接使用Capacitor官方状态栏插件，前端代码即可控制，完全无需操作原生层：

• 安装插件：npm install @capacitor/status-bar
• 同步原生配置：npx cap sync ios
• 在React代码合适位置调用即可：

import { StatusBar, Style } from '@capacitor/status-bar';

// 设置状态栏文字为黑色，适配浅色背景
StatusBar.setStyle({ style: Style.Dark });
// 也可直接设置状态栏背景色
StatusBar.setBackgroundColor({ color: '#f5f5f5' });

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