如何在iOS上通过代码更改外观模式？解决React Native启动屏适配问题

核心结论 #

1. 无法通过代码修改iOS系统级的「暗黑外观」设置——苹果限制第三方APP修改系统偏好，这是权限合规要求。
2. 可通过设置应用级外观偏好实现应用内模式控制+启动屏同步，这是合规可行的方案。

具体实现步骤 #

1. 配置iOS项目支持应用级外观切换

• 在iOS项目的Info.plist中添加UIUserInterfaceStyle键，值设为Automatic（允许应用自主控制外观模式，而非完全跟随系统）。
• 为启动屏准备Light/Dark两套资源：
  • 若使用LaunchScreen.storyboard：将启动屏图片放入Asset Catalog，设置图片的Appearance为Any, Dark，分别上传对应模式的图片。
  • 若使用LaunchImage：在Assets中创建LaunchImage的Light和Dark变体，确保系统能根据外观模式加载对应资源。

2. 持久化存储用户模式偏好

应用内切换模式时，除更新Redux状态，还要将用户选择的模式（light/dark/auto）持久化存储：

• React Native端：使用@react-native-async-storage/async-storage
• iOS原生端：使用UserDefaults（需和RN端存储逻辑保持一致）

3. 启动时提前设置应用外观

在iOS启动入口（SceneDelegate.swift或AppDelegate.swift）中，启动初期先读取本地存储的偏好，设置应用级外观：

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    
    let window = UIWindow(windowScene: windowScene)
    self.window = window
    
    // 读取本地存储的用户偏好
    let userDefaults = UserDefaults.standard
    let preferredTheme = userDefaults.string(forKey: "preferredTheme")
    
    // 设置应用外观模式
    switch preferredTheme {
    case "dark":
        window.overrideUserInterfaceStyle = .dark
    case "light":
        window.overrideUserInterfaceStyle = .light
    default:
        window.overrideUserInterfaceStyle = .unspecified // 跟随系统
    }
    
    window.rootViewController = UIHostingController(rootView: ContentView())
    window.makeKeyAndVisible()
}

React Native端也需在App组件挂载时，读取存储的偏好并同步设置（可借助react-native-appearance等工具简化操作）。

4. 应用内切换时同步更新

用户通过Redux切换模式时：

1. 更新Redux状态。
2. 将新模式写入本地存储。
3. 调用原生代码设置window.overrideUserInterfaceStyle，让当前应用界面立即切换模式。

关键原理 #

iOS启动屏由系统在应用启动初期加载，当我们在启动流程早期设置overrideUserInterfaceStyle，系统会根据这个应用级偏好选择对应的启动屏资源，从而实现启动屏与应用内模式的同步。

内容的提问来源于stack exchange，提问作者Morquecho.String