React Native中如何通过代码获取iOS/Android键盘颜色？

iOS端实现 #

iOS系统键盘的背景色需要通过原生UIKit API获取，React Native未直接暴露该能力，需自定义原生模块实现：

1. 编写Swift原生模块（Objective-C同理）：

   import UIKit
   @objc(KeyboardColorManager)
   class KeyboardColorManager: NSObject {
     @objc func getKeyboardBackgroundColor(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
       let keyboardAppearance = UITextInput().keyboardAppearance
       let bgColor: UIColor
       
       if #available(iOS 13.0, *) {
         bgColor = keyboardAppearance == .dark ? UIColor.systemKeyboardBackgroundColor : UIColor.systemBackground
       } else {
         bgColor = keyboardAppearance == .dark ? UIColor.black : UIColor.white
       }
       
       guard let components = bgColor.cgColor.components else {
         reject("COLOR_ERROR", "Failed to get color components", nil)
         return
       }
       
       resolve([
         "r": components[0],
         "g": components[1],
         "b": components[2],
         "a": components[3]
       ])
     }
   }
   

   按照React Native原生模块流程注册后，在RN代码中调用：

   import { NativeModules } from 'react-native';
   const { KeyboardColorManager } = NativeModules;
   
   async function getKeyboardColor() {
     try {
       const { r, g, b, a } = await KeyboardColorManager.getKeyboardBackgroundColor();
       return `rgba(${Math.floor(r*255)}, ${Math.floor(g*255)}, ${Math.floor(b*255)}, ${a})`;
     } catch (err) {
       console.error(err);
       return '#ffffff'; // 兜底颜色
     }
   }
   

2. 注意事项：iOS 13+提供systemKeyboardBackgroundColor直接匹配系统键盘背景；第三方输入法的自定义颜色无法通过系统API获取，仅能适配系统默认键盘。

Android端实现 #

Android无统一API直接获取键盘颜色（第三方输入法可完全自定义样式），但可通过以下方式适配系统默认键盘：

1. 使用PlatformColor匹配系统主题色：
   系统默认键盘背景通常与主题的colorSurface属性一致，可直接通过PlatformColor调用：

   import { Platform, PlatformColor } from 'react-native';
   
   const keyboardBackgroundColor = Platform.select({
     android: PlatformColor('?attr/colorSurface'), // 自动适配深色/浅色模式
     ios: '#ffffff' // 替换为iOS端获取的动态颜色
   });
   

2. 第三方输入法适配方案：
   由于第三方输入法颜色无法获取，可提供两种兜底方案：

   • 跟随系统主题色作为默认值
   • 允许用户手动选择与输入法匹配的颜色

关于PlatformColor的补充 #

React Native的PlatformColor可直接引用系统主题属性，Android端与键盘背景相关的常用属性包括：

• ?attr/colorSurface：对应浅色/深色模式下的表面背景色，与系统默认键盘匹配度最高
• ?attr/colorBackground：应用全局背景色，部分场景可作为替代

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