React Native中金额输入框需点击两次才能唤起计算器的问题

当描述输入框的系统键盘处于打开状态时，点击金额输入框会触发以下冲突流程：

1. 系统自动让描述输入框失焦，触发其onBlurCustom中的Keyboard.dismiss()
2. 键盘关闭操作会干扰金额输入框的聚焦状态，导致它短暂聚焦后立即被强制失焦
3. 第二次点击时，描述输入框已失焦，无键盘关闭操作干扰，金额输入框能正常聚焦并唤起计算器

方案1：移除描述输入框的手动键盘关闭逻辑 #

输入框失焦时系统会自动关闭键盘，无需手动调用Keyboard.dismiss()，移除该逻辑即可避免冲突：

<ScrollView>
  <View>
    <Input
      placeholder={`Enter the amount:`}
      keyboardType="number-pad"
      showSoftInputOnFocus={false}
      onFocusCustom={() => setShowCalulator(true)}
      onBlurCustom={() => setShowCalulator(false)}
      caretHidden={true}
    />
    <Input
      placeholder="Enter a short description: (Optional)"
      multiline
      // 移除手动键盘关闭逻辑
    />
  </View>
</ScrollView>

方案2：保留手动关闭逻辑，优化金额输入框聚焦流程 #

如果必须保留描述输入框的onBlurCustom，可以通过Ref手动控制描述输入框失焦，并延迟唤起计算器，确保键盘关闭操作完成后再处理金额输入框的聚焦：

import { useRef } from 'react';
import { InteractionManager } from 'react-native';

// 创建描述输入框的Ref
const descriptionInputRef = useRef(null);

// 组件JSX部分
<ScrollView>
  <View>
    <Input
      placeholder={`Enter the amount:`}
      keyboardType="number-pad"
      showSoftInputOnFocus={false}
      onFocusCustom={() => {
        // 先强制描述输入框失焦
        if (descriptionInputRef.current) {
          descriptionInputRef.current.blur();
        }
        // 等待UI交互完成后唤起计算器
        InteractionManager.runAfterInteractions(() => {
          setShowCalulator(true);
        });
      }}
      onBlurCustom={() => setShowCalulator(false)}
      caretHidden={true}
    />
    <Input
      ref={descriptionInputRef}
      placeholder="Enter a short description: (Optional)"
      multiline
      onBlurCustom={() => Keyboard.dismiss()}
    />
  </View>
</ScrollView>

额外优化提示 #

• 检查自定义Input组件的内部逻辑，确保onFocusCustom和onBlurCustom没有额外的聚焦状态干扰
• 若使用setTimeout替代InteractionManager，建议设置100-200ms的延迟，确保键盘关闭流程完全结束

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