如何在React Native的Android、iOS端为键盘设置自定义颜色

基础明暗配色适配（无额外依赖，适配绝大多数场景） #

React Native官方已经封装了双端通用的键盘明暗样式控制接口，无需修改原生代码或引入三方依赖：

• 全局统一设置：在应用入口文件中调用Keyboard API统一指定全应用键盘样式

  import { Keyboard } from 'react-native';
  // 可选值：default（跟随系统）、light（浅色键盘）、dark（深色键盘）
  Keyboard.setAppearance('dark');
  

• 单输入框单独配置：给指定TextInput组件添加keyboardAppearance属性，优先级高于全局配置

  <TextInput
    placeholder="唤起深色键盘"
    keyboardAppearance="dark"
  />
  

适配说明：该属性在iOS全版本系统原生支持，Android端仅支持Android 10及以上系统，低版本Android会自动忽略该属性，fallback到默认键盘样式。

深度自定义配色（支持自定义按键、背景色） #

如果官方提供的明暗两种样式无法满足需求，需要自定义指定键盘的背景、按键、文字颜色，可以使用以下两种方案：

方案A：自定义模拟键盘（适配100%场景） #

不受系统版本和第三方输入法限制，完全用JS实现模拟键盘，自己定义所有元素的配色和交互：

• 提前封装好自定义键盘组件，处理好按键输入、删除、换行等基础逻辑
• 拦截TextInput的默认唤起事件，点击输入框时唤起自定义的模拟键盘组件
• 自行适配键盘弹出时的输入框偏移、不同屏幕尺寸的布局兼容

方案B：原生层扩展适配 #

针对系统原生键盘做配置修改，仅对系统默认输入法生效：

• iOS端：在AppDelegate.m中添加键盘扩展的主题配置，指定自定义的配色参数
• Android端：在AndroidManifest.xml对应Activity节点添加输入法主题配置，同时通过原生层代码调用系统输入法的配色修改接口

注意事项：

• Android 10以下系统本身未开放系统键盘配色修改接口，第三方输入法也大多不支持应用层修改主题，这种场景下优先选择自定义模拟键盘方案
• 所有系统级键盘配色修改，仅对用户开启了系统默认输入法的场景生效，用户使用第三方自定义输入法时配置不会生效，属于系统级限制无法绕过

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