React Native Android：如何在TextInput粘贴时去除样式？

针对React Native 0.71.11在Android上复制带样式<Text>组件内容到<TextInput>时保留格式的问题，提供以下几种解决方案：

方案1：拦截TextInput粘贴事件，强制使用纯文本 #

通过监听TextInput的onPaste事件，直接从剪贴板获取纯文本内容并设置到输入框，忽略富文本格式。

步骤： #

1. 安装社区剪贴板库（RN 0.60+内置Clipboard已移至社区库）：

npm install @react-native-clipboard/clipboard --save
# 或 yarn add @react-native-clipboard/clipboard

2. 修改代码实现：

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

class App extends Component {
  state = {
    textInputMsg: ''
  };

  onChangeText = (text) => {
    this.setState({ textInputMsg: text });
  };

  onPaste = async () => {
    // 从剪贴板获取纯文本内容
    const plainText = await Clipboard.getString();
    this.setState({ textInputMsg: plainText });
  };

  render() {
    return (
      <View>
        <Text selectable style={{ color: '#fff', backgroundColor: '#000' }}>
          some text sdfsdfsd
        </Text>
        <TextInput
          value={this.state.textInputMsg}
          style={{ color: 'red', marginTop: 20, borderWidth: 1 }}
          onChangeText={this.onChangeText}
          onPaste={this.onPaste}
        />
      </View>
    );
  }
}

export default App;

这个方案无需修改原生代码，仅在JS层处理，适合局部场景。

方案2：修改Android原生代码，全局让Text组件复制纯文本 #

如果需要全局解决所有<Text>组件的复制行为，可修改React Native的原生TextView实现，强制复制纯文本。

步骤： #

1. 找到React Native原生文件：node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

2. 修改onTextContextMenuItem方法，替换复制逻辑：

@Override
public boolean onTextContextMenuItem(int id) {
    if (id == android.R.id.copy) {
        ClipboardManager clipboard = (ClipboardManager) getContext().getSystemService(Context.CLIPBOARD_SERVICE);
        // 仅复制纯文本内容
        ClipData clip = ClipData.newPlainText("React Native Text", getText().toString());
        clipboard.setPrimaryClip(clip);
        return true;
    }
    return super.onTextContextMenuItem(id);
}

3. 使用patch-package持久化修改：

npx patch-package react-native

这样每次npm install后修改都会被自动应用。

问题原因说明 #

Android系统中，TextView默认复制的内容包含富文本格式信息，React Native的<TextInput>在粘贴时会解析这些格式并保留；而iOS端默认将复制内容处理为纯文本，因此不会出现该问题。

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