React Native中如何禁用TextInput的剪切/复制/粘贴且保留可见光标？

由于React Native的TextInput在iOS和Android平台的行为存在差异，需要分平台针对性处理，以下是可行的实现方案：

iOS平台实现 #

方案1：通过选区控制+阻止长按菜单 #

通过监听文本选区变化，强制将选区长度设为0，同时阻止长按弹出上下文菜单，彻底禁用选中文本的能力：

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

const NoCopyTextInput = () => {
  const [inputValue, setInputValue] = useState('');

  const handleSelectionChange = (event) => {
    // 检测到文本被选中时，强制将选区重置为光标所在位置（长度为0）
    if (event.nativeEvent.selection.end - event.nativeEvent.selection.start > 0) {
      event.target.setNativeProps({
        selection: {
          start: event.nativeEvent.selection.end,
          end: event.nativeEvent.selection.end,
        },
      });
    }
  };

  const handleLongPress = (event) => {
    // 阻止长按触发系统上下文菜单
    event.preventDefault();
  };

  return (
    <TextInput
      value={inputValue}
      onChangeText={setInputValue}
      onSelectionChange={handleSelectionChange}
      onLongPress={handleLongPress}
      caretHidden={false} // 保持光标可见
      selectTextOnFocus={false}
    />
  );
};

export default NoCopyTextInput;

方案2：使用新版属性（RN 0.66+） #

如果你的React Native版本在0.66以上，contextMenuHidden属性应该可以直接生效，配合selectTextOnFocus使用即可：

<TextInput
  contextMenuHidden={true}
  selectTextOnFocus={false}
  caretHidden={false}
  value={inputValue}
  onChangeText={setInputValue}
/>

Android平台实现 #

Android可以通过设置textIsSelectable为false禁用文本选择，同时阻止长按菜单：

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

const NoCopyTextInput = () => {
  const inputRef = useRef(null);
  const [inputValue, setInputValue] = useState('');

  const handleFocus = () => {
    // 聚焦后禁用文本选择能力
    if (inputRef.current) {
      inputRef.current.setNativeProps({
        textIsSelectable: false,
      });
    }
  };

  return (
    <TextInput
      ref={inputRef}
      value={inputValue}
      onChangeText={setInputValue}
      onFocus={handleFocus}
      onLongPress={(e) => e.preventDefault()}
      caretHidden={false}
    />
  );
};

export default NoCopyTextInput;

跨平台通用封装 #

如果需要一套代码适配双平台，可以通过Platform判断应用不同逻辑：

import React, { useState, useRef } from 'react';
import { TextInput, Platform } from 'react-native';

const NoCopyTextInput = ({ value, onChangeText, ...props }) => {
  const inputRef = useRef(null);
  const [localValue, setLocalValue] = useState(value);

  const handleChangeText = (text) => {
    setLocalValue(text);
    onChangeText?.(text);
  };

  const handleSelectionChange = (event) => {
    if (Platform.OS === 'ios' && event.nativeEvent.selection.end - event.nativeEvent.selection.start > 0) {
      event.target.setNativeProps({
        selection: {
          start: event.nativeEvent.selection.end,
          end: event.nativeEvent.selection.end,
        },
      });
    }
  };

  const handleFocus = () => {
    if (Platform.OS === 'android' && inputRef.current) {
      inputRef.current.setNativeProps({
        textIsSelectable: false,
      });
    }
  };

  const handleLongPress = (e) => {
    e.preventDefault();
  };

  return (
    <TextInput
      ref={inputRef}
      value={localValue}
      onChangeText={handleChangeText}
      onSelectionChange={handleSelectionChange}
      onFocus={handleFocus}
      onLongPress={handleLongPress}
      caretHidden={false}
      selectTextOnFocus={false}
      contextMenuHidden={Platform.OS === 'ios'}
      {...props}
    />
  );
};

export default NoCopyTextInput;

注意事项 #

• 不同RN版本对属性的支持有差异，建议使用0.70+的稳定版本，兼容性更好；
• Android上textIsSelectable设为false后，文本无法被选中，直接阻断剪切复制粘贴的触发条件；
• 长按事件阻止默认行为可以避免弹出系统上下文菜单，进一步强化禁用效果。

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