如何禁用React Native TextInput编辑功能但保留回车、退格键响应？

你提到的问题确实存在，editable={false}会直接让输入框失焦，所有键盘相关的回调事件都无法触发，因此不能直接用这个属性实现需求。可行的核心思路是保留输入框的可编辑状态，但拦截所有会修改内容的操作，只放行你需要监听的按键事件，具体实现方案如下：

方案1：通过onChangeText拦截内容修改（全平台通用） #

这是兼容性最高的实现方案，逻辑如下：

• 将TextInput的value绑定到一个固定的状态变量，onChangeText回调永远不更新这个状态，用户输入的任何内容都不会生效，等价于禁用了编辑功能
• 所有键盘相关的onKeyPress、onSubmitEditing等回调都可以正常触发，能正常捕获回车、退格等按键操作

示例代码：

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

const ControlledTextInput = () => {
  // 固定输入框内容，永远不更新该状态
  const [fixedValue, setFixedValue] = useState('');

  const handleKeyPress = (e) => {
    const keyName = e.nativeEvent.key;
    if (keyName === 'Enter') {
      // 自定义回车按键逻辑
      console.log('回车按键触发');
    } else if (keyName === 'Backspace') {
      // 自定义退格按键逻辑
      console.log('退格按键触发');
    }
  };

  const handleSubmitEditing = () => {
    // 自定义提交逻辑
    console.log('提交事件触发');
  };

  return (
    <TextInput
      value={fixedValue}
      onChangeText={() => {}} // 空回调，不更新输入框内容
      onKeyPress={handleKeyPress}
      onSubmitEditing={handleSubmitEditing}
      contextMenuHidden={true} // 可选：禁用长按菜单，防止用户通过粘贴修改内容
    />
  );
};

适配注意事项 #

• 部分安卓机型在输入框内容为空时不会触发退格的onKeyPress事件，如需兼容该场景，可以给fixedValue设置一个零宽空格\u200B作为初始占位值，就可以正常捕获空内容下的退格事件
• 如果输入框需要展示默认内容，直接修改fixedValue的初始值即可，只要不在onChangeText里更新该状态，内容就不会被用户修改

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