如何修改React Native TextInput非selectionColor控制的光标颜色（Expo环境）

解决方案 #

针对Expo环境下无法直接修改styles.xml的场景，有两种无需改动原生文件的实现方式：

方案1：全局配置（适配所有输入框）

使用Expo官方提供的expo-build-properties配置插件，在构建时自动注入安卓原生颜色配置：

1. 安装依赖：
   npx expo install expo-build-properties
2. 修改项目根目录下的app.json或app.config.js，在plugins数组中添加如下配置：

[
  "expo-build-properties",
  {
    "android": {
      "colors": {
        "colorControlActivated": "#你需要的颜色值，例如#2196F3"
      }
    }
  }
]

这里的colorControlActivated是安卓系统层面控制选中文本高亮、拖动手柄颜色的属性，配置后全局生效。

方案2：局部配置（仅针对单个输入框）

React Native 0.66+及对应支持的Expo SDK版本（SDK 45+）已经新增了对应专有属性，可以直接在TextInput组件上设置：

<TextInput
  // 竖线光标颜色
  cursorColor="#2196F3"
  // 选中文本的高亮背景色（可设置透明度）
  selectionColor="rgba(33, 150, 243, 0.3)"
  // 选中文本时两端的拖动手柄颜色
  selectionHandleColor="#2196F3"
/>

该配置仅对安卓平台生效，iOS平台对应属性会自动适配无需额外处理。

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