React Native中如何动态启用和禁用键盘上的完成按钮

方案1：跨平台逻辑拦截方案（无原生修改成本，优先推荐） #

无需调整原生代码，仅通过JS层逻辑即可实现自定义控制需求，兼容性最好：

• 自定义校验规则判断输入是否符合要求，替代原生enablesReturnKeyAutomatically的非空判断逻辑
• 动态修改returnKeyType属性，在输入不符合要求时展示不同的返回键文案做状态区分
• 在onSubmitEditing回调中先校验输入有效性，不符合规则直接拦截业务逻辑，可配合提示组件告知用户错误原因

代码示例：

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

const ValidatableInput = () => {
  const [inputVal, setInputVal] = useState('');

  // 自定义校验规则，可根据需求任意修改
  const isInputValid = () => {
    // 示例规则：输入长度≥8 且 包含至少1个特殊字符
    return inputVal.length >= 8 && /[!@#$%^&*]/.test(inputVal);
  };

  const handleSubmit = () => {
    if (!isInputValid()) {
      Alert.alert('输入不符合要求', '请输入长度≥8且包含特殊字符的内容');
      return;
    }
    // 校验通过后执行提交逻辑
    console.log('提交内容：', inputVal);
  };

  return (
    <TextInput
      value={inputVal}
      onChangeText={setInputVal}
      returnKeyType={isInputValid() ? 'done' : 'default'}
      onSubmitEditing={handleSubmit}
    />
  );
};

方案2：原生扩展方案（实现完成按钮完全置灰效果） #

如果产品要求输入不符合规则时，键盘的完成按钮必须完全置灰不可点击，可通过封装自定义原生TextInput组件实现：

• iOS端：扩展UITextField组件，新增自定义isReturnKeyEnabled属性，属性变化时直接控制键盘返回键的启用状态，替代系统默认的enablesReturnKeyAutomatically逻辑
• Android端：扩展EditText组件，通过修改IME选项和拦截按键事件实现返回键的动态启用/禁用，部分第三方输入法可能需要额外适配

注意事项 #

• 原生enablesReturnKeyAutomatically属性的判断逻辑由系统硬编码实现，仅支持非空校验，无法扩展自定义规则，无法满足灵活控制需求
• Android平台不同第三方输入法对返回键状态修改的支持程度不同，若无强视觉置灰要求，优先使用方案1兼容性更好

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