React Native中如何修改TextInput的文本高亮标记颜色？

原生核心组件TextInput自带的selectionColor属性仅支持自定义光标颜色、用户手动选中文本的高亮背景色，确实没有提供搜索匹配文本高亮标记的自定义配置项，要实现自定义高亮颜色可以通过以下两种方案实现：

方案一：自定义文本分段渲染（无原生依赖，灵活度最高） #

• 实现逻辑：采用双层叠加的结构实现效果，底层放置文字颜色设为透明的TextInput，专门负责处理输入交互、唤起键盘、显示光标；上层覆盖一层设置为不响应交互的Text容器，把输入的文本按搜索关键词拆分为普通片段、匹配高亮片段，给高亮片段单独设置文字色、背景色即可完全自定义高亮样式，不受原生属性限制。
• 场景适配：如果是只读的搜索联想结果展示场景，不需要做双层叠加，直接嵌套Text组件渲染分段文本即可；如果是可编辑的输入框场景，需要对齐上下两层的内边距、字体大小、行高，保证上层渲染的文本和底层输入框的文本位置完全重合。
• 核心实现代码：

import React, { useMemo, useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

// 文本按关键词切分工具，自动转义正则特殊字符避免匹配异常
const splitMatchSegment = (fullText, keyword) => {
  if (!keyword.trim()) return [{ content: fullText, isMatch: false }];
  const escapeReg = /[.*+?^${}()|[\]\\]/g;
  const matchReg = new RegExp(`(${keyword.replace(escapeReg, '\\$&')})`, 'gi');
  return fullText.split(matchReg).filter(Boolean).map(segment => ({
    content: segment,
    isMatch: segment.toLowerCase() === keyword.trim().toLowerCase()
  }));
};

const CustomHighlightSearchBar = () => {
  const [inputValue, setInputValue] = useState('');
  const segments = useMemo(() => splitMatchSegment(inputValue, inputValue), [inputValue]);

  return (
    <View style={styles.barWrap}>
      {/* 底层输入框：文字设为透明，仅响应交互、显示光标 */}
      <TextInput
        style={styles.baseInput}
        value={inputValue}
        onChangeText={setInputValue}
        selectionColor="#2563eb"
        autoCorrect={false}
      />
      {/* 上层高亮渲染层：关闭交互事件，避免影响底层输入 */}
      <View style={styles.highlightOverlay} pointerEvents="none">
        {segments.map((item, index) => (
          <Text
            key={index}
            style={item.isMatch ? styles.matchHighlight : styles.normalText}
          >
            {item.content}
          </Text>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  barWrap: {
    width: '100%',
    position: 'relative',
    paddingHorizontal: 16
  },
  baseInput: {
    width: '100%',
    height: 48,
    fontSize: 16,
    color: 'transparent',
    borderBottomWidth: 1,
    borderColor: '#e5e7eb',
    paddingHorizontal: 0
  },
  highlightOverlay: {
    position: 'absolute',
    left: 16,
    top: 0,
    height: 48,
    flexDirection: 'row',
    alignItems: 'center'
  },
  normalText: {
    fontSize: 16,
    color: '#1f2937'
  },
  matchHighlight: {
    fontSize: 16,
    color: '#ffffff',
    backgroundColor: '#ef4444', // 此处可按需修改高亮颜色、圆角等样式
    borderRadius: 2
  }
});

export default CustomHighlightSearchBar;

方案二：使用现成封装组件（快速落地） #

• 如果不想自己处理文本对齐、光标适配、多语言匹配、特殊字符转义等边界问题，可以直接用维护状态良好的第三方封装组件。这类组件本质也是基于分层渲染的逻辑实现，一般直接暴露highlightColor、highlightTextColor属性，传入目标色值即可完成自定义，不需要自己写分段切分逻辑。
• 选型注意：优先选择近3个月有版本更新、适配React Native新架构（Fabric）的组件，避免出现版本兼容、输入异常问题。

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