React Native iOS：能否重写UIUserInterfaceStyle或单独设置屏幕外观？

一、获取设备真实的系统明暗模式 #

当你在Info.plist中设置UIUserInterfaceStyle为Light后，React Native的Appearance.getColorScheme()只会返回APP的强制风格，无法拿到系统真实设置。要获取系统真实模式，需要通过原生iOS代码桥接实现：

1. 创建原生Swift模块：
   在iOS项目中新建SystemAppearanceManager.swift文件，编写获取系统配色的逻辑：

   import UIKit
   import React
   
   @objc(SystemAppearanceManager)
   class SystemAppearanceManager: NSObject, RCTBridgeModule {
     static func moduleName() -> String! {
       return "SystemAppearanceManager"
     }
   
     static func requiresMainQueueSetup() -> Bool {
       return true
     }
   
     @objc func getSystemColorScheme(_ resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) {
       let systemScheme = UITraitCollection.current.userInterfaceStyle
       resolve(systemScheme == .dark ? "dark" : "light")
     }
   }
   

2. 配置Objective-C桥接文件（若无则新建Bridge.m）：

   #import <React/RCTBridgeModule.h>
   
   @interface RCT_EXTERN_MODULE(SystemAppearanceManager, NSObject)
   RCT_EXTERN_METHOD(getSystemColorScheme:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
   @end
   

3. 在React Native中调用获取：

   import { NativeModules } from 'react-native';
   const { SystemAppearanceManager } = NativeModules;
   
   const fetchSystemColorScheme = async () => {
     try {
       const realScheme = await SystemAppearanceManager.getSystemColorScheme();
       // 这里执行你的统计逻辑
       console.log('系统真实明暗模式:', realScheme);
     } catch (err) {
       console.error('获取系统模式失败:', err);
     }
   };
   

二、重写UIUserInterfaceStyle或单独设置特定屏幕外观 #

方式1：原生层全局/单个屏幕强制设置 #

• 全局强制风格：在AppDelegate.swift中设置根控制器的风格：

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // ...其他初始化代码
    window?.rootViewController?.overrideUserInterfaceStyle = .light
    return true
  }
  

• 单个屏幕强制风格：给SystemAppearanceManager添加设置方法，配合顶层控制器扩展：
  先给UIViewController添加获取顶层控制器的扩展：

  extension UIViewController {
    func topMostViewController() -> UIViewController {
      if let presented = presentedViewController {
        return presented.topMostViewController()
      }
      if let nav = self as? UINavigationController {
        return nav.visibleViewController?.topMostViewController() ?? nav
      }
      if let tab = self as? UITabBarController {
        return tab.selectedViewController?.topMostViewController() ?? tab
      }
      return self
    }
  }
  

  然后在SystemAppearanceManager中添加设置方法：

  @objc func setCurrentScreenStyle(_ style: String) {
    guard let topVC = UIApplication.shared.windows.first?.rootViewController?.topMostViewController() else { return }
    topVC.overrideUserInterfaceStyle = style == "dark" ? .dark : .light
  }
  

  最后在桥接文件声明方法，RN中调用：

  // 强制当前屏幕为浅色
  SystemAppearanceManager.setCurrentScreenStyle('light');
  

方式2：结合React Navigation动态设置 #

如果你用React Navigation，可以在页面的options中根据系统真实模式动态设置：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="TargetScreen" 
        component={TargetScreen}
        options={async () => {
          const systemScheme = await SystemAppearanceManager.getSystemColorScheme();
          // 系统为深色时，强制当前页面为浅色
          if (systemScheme === 'dark') {
            SystemAppearanceManager.setCurrentScreenStyle('light');
          }
          return { title: '目标页面' };
        }}
      />
    </Stack.Navigator>
  );
}

注意事项 #

• 若仅需统计系统模式，只实现第一部分的原生模块即可，无需改动Info.plist的全局设置（或保留全局设置，通过原生获取真实值）。
• 单个屏幕强制风格后，建议在页面卸载时将overrideUserInterfaceStyle重置为unspecified，避免影响其他页面的风格继承。

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