React Native中TextInput将值作为子元素传入时出现Bug

问题根源 #

React Native 0.70.2版本的TextInput组件对直接传入children作为可编辑富文本的支持存在交互bug，原生输入组件的文本管理逻辑与React层面的children渲染机制不兼容，会导致光标错位、输入响应异常等问题。

可行解决方案 #

1. 改用结构化数据+renderText自定义渲染

放弃通过children传入内容，转而用结构化数据存储文本和提及节点，配合TextInput的renderText属性实现富文本渲染，同时维护输入交互逻辑：

import { useState, Text, TextInput } from 'react-native';

export default function MentionInput() {
  // 用数组存储结构化内容：普通文本/提及节点
  const [content, setContent] = useState([
    { type: 'text', value: 'Hi ' },
    { type: 'mention', value: '@Alice', userId: 123 }
  ]);

  // 把结构化内容转为纯文本用于TextInput的value属性
  const plainText = content.map(item => item.value).join('');

  // 处理文本变化，需根据业务逻辑更新结构化内容
  const handleTextChange = (newText) => {
    const newContent = [];
    let currentText = '';
    for (let char of newText) {
      if (char === '@') {
        if (currentText) {
          newContent.push({ type: 'text', value: currentText });
          currentText = '';
        }
        // 结合提及选择器插入提及节点（示例）
        newContent.push({ type: 'mention', value: '@User', userId: 456 });
      } else {
        currentText += char;
      }
    }
    if (currentText) {
      newContent.push({ type: 'text', value: currentText });
    }
    setContent(newContent);
  };

  return (
    <TextInput
      style={{ borderWidth: 1, padding: 8, fontSize: 16 }}
      value={plainText}
      onChangeText={handleTextChange}
      // 自定义渲染富文本内容
      renderText={() => (
        <>
          {content.map((item, idx) => (
            <Text
              key={idx}
              style={item.type === 'mention' ? { color: '#165DFF', fontWeight: '500' } : {}}
            >
              {item.value}
            </Text>
          ))}
        </>
      )}
    />
  );
}

2. 使用成熟的第三方提及输入库

直接选用专门解决提及场景的第三方库，这类库已封装好TextInput的交互逻辑，避免原生组件的bug。比如react-native-mentions或@ui-kitten/components中的提及输入组件，它们会自动处理光标定位、提及节点的插入与删除，无需自行维护复杂的文本结构。

3. 临时降级RN版本（不推荐）

如果项目允许，可临时降级到React Native 0.69.x版本，该版本对TextInput children的支持相对稳定，但这只是临时方案，长期建议采用前两种方案适配新版本。

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