React Native showSoftInputOnFocus异常：输入框切换焦点与键盘控制问题

问题场景 #

应用内有两个TextInput输入框：

• 第一个输入框点击时不唤起系统键盘，显示自定义计算器
• 第二个输入框点击时唤起默认系统键盘

异常情况：当第二个输入框处于聚焦状态（键盘已弹出）时，直接点击第一个输入框，会出现以下问题：

1. 未处理时：第一个输入框获得焦点，但系统键盘不会收起
2. 给第二个输入框添加onBlur={()=>Keyboard.dismiss()}后：键盘会收起，但第一个输入框无法直接获得焦点，需再次点击

解决方案 #

核心思路是主动控制焦点切换与键盘收起的顺序：

• 给第一个输入框添加点击事件，先强制收起系统键盘，再手动触发第一个输入框的聚焦操作
• 利用useRef获取第一个输入框的实例，确保能主动调用聚焦方法

修改后的代码示例 #

import { useRef, useState } from 'react';
import { ScrollView, View, TextInput, Keyboard, Text } from 'react-native';

export default function App() {
  const [firstInput, setFirstInput] = useState('');
  const [secondInput, setSecondInput] = useState('');
  const [showCalculator, setShowCalculator] = useState(false);
  // 创建第一个输入框的ref实例
  const firstInputRef = useRef(null);

  const handleFirstInputPress = () => {
    // 先强制收起系统键盘
    Keyboard.dismiss();
    // 延迟执行聚焦，确保键盘收起操作完成后再触发
    setTimeout(() => {
      firstInputRef.current?.focus();
    }, 100);
  };

  return (
    <ScrollView>
      <View style={{ padding: 20, gap: 15 }}>
        <TextInput
          ref={firstInputRef}
          placeholder="Enter amount:"
          value={firstInput}
          onChangeText={setFirstInput}
          showSoftInputOnFocus={false}
          onFocus={() => setShowCalculator(true)}
          onBlur={() => setShowCalculator(false)}
          onPress={handleFirstInputPress}
          style={{
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            borderRadius: 5
          }}
        />
        <TextInput
          placeholder="Enter description:"
          value={secondInput}
          onChangeText={setSecondInput}
          style={{
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            borderRadius: 5
          }}
        />
        {/* 自定义计算器区域，根据状态控制显示 */}
        {showCalculator && (
          <View style={{ padding: 20, backgroundColor: '#f0f0f0', borderRadius: 5 }}>
            <Text>自定义计算器组件</Text>
          </View>
        )}
      </View>
    </ScrollView>
  );
}

关键说明 #

• showSoftInputOnFocus={false}：确保第一个输入框聚焦时不会唤起系统键盘
• onPress事件：拦截点击操作，先处理键盘收起再手动聚焦，避免焦点切换与键盘状态的冲突
• 延迟聚焦：使用setTimeout是为了给原生键盘收起操作留足执行时间，避免因事件顺序问题导致聚焦失效

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