如何在React Native中新增原生组件实现两种多行TextInput回车逻辑

该方案不需要修改原生代码、不需要调整patch逻辑，改造成本最低且兼容性最好：

• 先回滚之前用patch-package对react-native包的全局修改，恢复原生TextInput的默认行为
• 封装自定义组件，通过onKeyPress事件拦截multiline模式下的回车动作，阻止换行插入，代码示例如下：

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

const CustomTextInput = ({ onSubmitEditing, ...restProps }) => {
  const handleKeyPress = useCallback((event) => {
    // 仅在multiline为true时拦截回车事件
    if (restProps.multiline && event.nativeEvent.key === 'Enter') {
      event.preventDefault();
      // 按需触发回车提交逻辑
      onSubmitEditing?.();
    }
  }, [restProps.multiline, onSubmitEditing]);

  return <TextInput {...restProps} onKeyPress={handleKeyPress} />;
};

export default CustomTextInput;

• 使用时，需要特殊逻辑的模块引入CustomTextInput，其余场景直接使用原生TextInput即可。

如果必须做原生级的组件拆分，可按以下步骤操作：

iOS端适配 #

• 打开iOS原生工程，找到RN源码中的RCTTextField、RCTTextView文件（对应TextInput的单行、多行原生实现）
• 复制两份文件重命名为CustomRCTTextField、CustomRCTTextView，修改内部类名、组件导出标识，避免和原生组件冲突
• 将你之前patch的回车不换行逻辑写入CustomRCTTextView的对应事件处理方法中
• 新建CustomTextInputManager继承自RCTViewManager，绑定自定义原生视图，导出所需属性和事件

Android端适配 #

• 打开Android原生工程，找到RN源码中的ReactTextInputManager、ReactEditText文件
• 复制重命名为CustomReactTextInputManager、CustomReactEditText，修改类名、组件注册名称
• 将回车拦截逻辑写入CustomReactEditText的按键事件处理方法中
• 在自定义ReactPackage中注册新的CustomReactTextInputManager

JS层适配 #

• 通过requireNativeComponent引入你导出的原生自定义组件，补全属性映射和类型定义，最终即可得到两个独立可用的TextInput组件。

如果你不想回滚已经做好的全局patch修改，也可以直接导出重命名的原始组件：

• 在公共工具文件中导出原始TextInput并重命名：

import { TextInput as OriginalTextInput } from 'react-native';
export { OriginalTextInput };

• 此时全局patch后的TextInput是修改后的逻辑，OriginalTextInput保留原生默认逻辑，也能满足需求，无需额外开发。

• JS层拦截方案覆盖iOS15+、Android10+全版本，无性能损耗，优先选择
• 新增原生组件的方案需要每次升级React Native版本时同步适配原生源码改动，维护成本更高

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