React Native中如何禁用默认上下文菜单仍保留文本选中功能？

以下是几种可行的解决方案，根据你的文本组件类型选择：

1. 针对TextInput组件（输入框文本） #

React Native 0.63+ 支持跨平台的contextMenuHidden属性，直接设置即可禁用默认上下文菜单，同时结合事件实现自定义操作：

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

const CustomTextInput = () => {
  const [selectionRange, setSelectionRange] = useState({ start: 0, end: 0 });

  const handleLongPress = () => {
    // 执行你的自定义操作，比如弹出自定义菜单、复制到自定义剪贴板等
    console.log('选中的文本范围:', selectionRange);
  };

  const handleSelectionChange = (event) => {
    setSelectionRange(event.nativeEvent.selection);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        value="测试可选中的输入文本"
        contextMenuHidden={true}
        onLongPress={handleLongPress}
        onSelectionChange={handleSelectionChange}
        style={{ borderWidth: 1, padding: 10, fontSize: 16 }}
        multiline
      />
    </View>
  );
};

export default CustomTextInput;

2. 针对普通Text组件（非输入框文本） #

普通Text组件默认不支持选中文本，若要实现选中文本并禁用系统菜单，推荐使用第三方库或自定义原生逻辑：

方式一：使用第三方库（推荐） #

比如react-native-selectable-text，它内置了选中文本的功能，且默认禁用系统上下文菜单，可直接绑定自定义操作：

import SelectableText from 'react-native-selectable-text';

const CustomSelectableText = () => {
  const handleSelection = ({ nativeEvent: { selection, text } }) => {
    if (selection.start !== selection.end) {
      const selectedText = text.substring(selection.start, selection.end);
      // 执行自定义操作，比如显示自定义操作菜单
      console.log('选中的文本:', selectedText);
    }
  };

  return (
    <SelectableText
      value="这是一段普通文本，现在可以选中并执行自定义操作"
      onSelectionChange={handleSelection}
      style={{ fontSize: 16, padding: 20 }}
    />
  );
};

export default CustomSelectableText;

方式二：自定义原生模块（适合高度定制） #

如果不想依赖第三方库，可通过原生代码拦截系统菜单：

• iOS：创建自定义UITextView子类，重写canPerformAction:withSender:方法返回false，阻止系统菜单弹出；
• Android：自定义TextView，拦截长按事件并实现自己的选中文本逻辑。

3. 全局禁用（不推荐） #

若整个APP都不需要系统上下文菜单，可在原生层全局配置，但会丢失默认选中文本功能，需配合自定义逻辑：

• iOS：在AppDelegate.m中添加：

  UITextView.appearance.allowsContextMenuInteraction = NO;
  

• Android：在res/values/styles.xml的主题中添加：

  <item name="android:textIsSelectable">false</item>
  

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