React Native中如何仅允许InputTextField粘贴，禁用剪切/复制

方案一：分平台自定义原生组件（贴合系统交互） #

iOS端 #

通过自定义UITextField子类，拦截系统上下文菜单的操作权限：

1. 创建原生子类，重写权限判断方法：

#import <UIKit/UIKit.h>

@interface CustomPasteOnlyTextField : UITextField
@end

@implementation CustomPasteOnlyTextField

- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
    // 仅允许粘贴操作
    if (action == @selector(paste:)) {
        return YES;
    }
    return NO;
}

@end

2. 将该组件封装为React Native原生组件，暴露给JS层调用。

Android端 #

自定义EditText的动作模式回调，移除剪切、复制选项：

1. 创建原生子类，重写动作模式创建逻辑：

import android.content.Context;
import android.view.ActionMode;
import android.view.Menu;
import android.view.MenuItem;
import androidx.appcompat.widget.AppCompatEditText;

public class CustomPasteOnlyEditText extends AppCompatEditText {
    public CustomPasteOnlyEditText(Context context) {
        super(context);
    }

    @Override
    public ActionMode startActionMode(ActionMode.Callback callback) {
        return super.startActionMode(new ActionMode.Callback() {
            @Override
            public boolean onCreateActionMode(ActionMode mode, Menu menu) {
                // 移除剪切、复制选项
                menu.removeItem(android.R.id.cut);
                menu.removeItem(android.R.id.copy);
                return callback.onCreateActionMode(mode, menu);
            }

            @Override
            public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
                return callback.onPrepareActionMode(mode, menu);
            }

            @Override
            public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
                return callback.onActionItemClicked(mode, item);
            }

            @Override
            public void onDestroyActionMode(ActionMode mode) {
                callback.onDestroyActionMode(mode);
            }
        });
    }
}

2. 封装为React Native原生组件供JS层使用。

方案二：JS层模拟实现（快速替代方案） #

若不想编写原生代码，可通过自定义交互模拟需求：

• 开启contextMenuHidden={true}屏蔽系统默认菜单
• 给输入框添加长按手势，弹出仅含粘贴选项的自定义弹窗
• 利用Clipboard模块获取剪贴板内容并手动写入输入框

示例代码：

import React, { useState, useRef } from 'react';
import { View, TextInput, TouchableOpacity, Text, Clipboard, Modal } from 'react-native';

const PasteOnlyInput = () => {
  const [inputText, setInputText] = useState('');
  const [showPasteMenu, setShowPasteMenu] = useState(false);
  const inputRef = useRef(null);

  const handleLongPress = () => {
    setShowPasteMenu(true);
  };

  const handlePaste = async () => {
    const clipboardContent = await Clipboard.getString();
    setInputText(prev => prev + clipboardContent);
    setShowPasteMenu(false);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        ref={inputRef}
        value={inputText}
        onChangeText={setInputText}
        contextMenuHidden={true}
        onLongPress={handleLongPress}
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, borderRadius: 4 }}
      />
      <Modal
        visible={showPasteMenu}
        transparent={true}
        onRequestClose={() => setShowPasteMenu(false)}
      >
        <TouchableOpacity
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}
          onPress={() => setShowPasteMenu(false)}
        >
          <TouchableOpacity
            style={{ backgroundColor: '#fff', paddingHorizontal: 20, paddingVertical: 12, borderRadius: 6 }}
            onPress={handlePaste}
          >
            <Text style={{ fontSize: 16 }}>粘贴</Text>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

export default PasteOnlyInput;

注意事项 #

• 原生方案能完全匹配系统原生交互体验，但需要维护原生代码
• JS层方案实现快速，但交互逻辑与系统菜单有差异，适合对体验要求不高的场景
• React Native官方目前未提供直接控制上下文菜单选项的API，需通过上述方式实现

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