如何使React Native的TextInput粘贴时忽略富文本格式仅获取纯文本

问题原因 #

React Native的TextInput组件在iOS和Android端默认支持解析粘贴板中的富文本（属性字符串），这类内容自带的字体、字重、颜色等格式优先级高于TextInput设置的全局样式，因此直接修改组件样式无法生效。未将TextInput作为受控组件绑定value属性也是常见的失效原因：非受控模式下输入框内部会保留独立的富文本状态，不会响应state的更新。 #

解决方案 #

方案1：全平台通用（推荐） #

监听粘贴事件，手动读取粘贴板纯文本插入，完全阻止富文本粘贴。

1. 先安装官方剪贴板库：
   npm install @react-native-clipboard/clipboard --save
2. 组件代码参考：

import Clipboard from '@react-native-clipboard/clipboard';
import { TextInput } from 'react-native';

class YourComponent extends React.Component {
  state = {
    text: '',
    // 存储当前光标/选中区域位置
    selection: { start: 0, end: 0 }
  }

  render() {
    return (
      <TextInput
        multiline
        // 必须绑定value，作为受控组件使用
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
        // 监听光标位置变化
        onSelectionChange={e => this.setState({ selection: e.nativeEvent.selection })}
        // 自定义粘贴逻辑
        onPaste={async e => {
          // 阻止默认粘贴行为，避免富文本直接插入
          e.preventDefault();
          // 仅读取剪贴板的纯文本内容
          const plainText = await Clipboard.getString();
          const { selection, text } = this.state;
          // 将纯文本插入到当前光标位置
          const newText = text.slice(0, selection.start) + plainText + text.slice(selection.end);
          this.setState({
            text: newText,
            // 把光标移动到插入内容的末尾
            selection: {
              start: selection.start + plainText.length,
              end: selection.start + plainText.length
            }
          })
        }}
      />
    )
  }
}

方案2：轻量兼容方案（无需额外依赖） #

适合简单业务场景，无需引入额外库，通过强制重绘清除富文本格式：

<TextInput
  multiline
  value={this.state.text}
  onChangeText={text => {
    // 先清空再赋值，触发输入框重绘清除内部缓存的富文本属性
    this.setState({ text: '' }, () => {
      this.setState({ text: text.toString() })
    })
  }}
/>

该方案缺点是粘贴时光标会自动跳到内容末尾，不适合需要保留光标位置的复杂输入场景。 #

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