React Native 两个自定义TextInput组件切换时光标不跳转焦点异常问题

你的代码存在的具体问题 #

• 焦点事件冲突：外层TouchableWithoutFeedback的onPress事件与内部TextInput的原生触摸焦点事件存在时序竞争。你在onPress里手动调用focus()的同时，TextInput自身也会响应触摸尝试切换焦点，加上你提前手动修改isFocus状态，没有和原生实际焦点状态对齐，会导致上一个输入框未正确触发失焦，新输入框的焦点请求被原生层拦截。
• 焦点回调被覆盖：你在内部TextInput上硬编码了onFocus/onBlur回调，没有先执行props中透传的同名回调，会破坏默认的焦点状态流转逻辑，也可能导致上层状态和组件内部状态不一致。
• 缺少forwardRef适配：你封装的InputField没有使用React.forwardRef处理ref透传，如果上层需要绑定ref操作焦点，会出现ref指向错误的问题，也会间接干扰原生焦点识别。

这类焦点切换异常的通用原因 #

• 触摸事件被拦截：自定义组件外层包裹的可点击组件（如Touchable*系列）阻止了原生输入框的触摸事件冒泡，或抢占了事件响应权，导致输入框无法正常获得原生焦点。
• 焦点状态不同步：组件内部维护的焦点状态和原生输入框的实际焦点状态不一致，比如手动修改状态早于原生焦点回调触发，导致逻辑层判断错误，后续焦点操作失效。
• 布局重绘干扰：KeyboardAvoidingView、ScrollView等容器在键盘弹起时触发布局重绘，输入框的位置/挂载状态发生变化，原生层无法正确绑定当前聚焦的输入框上下文。
• 多输入框焦点时序问题：短时间内连续触发多个输入框的focus/blur操作，原生层的焦点队列处理异常，导致后续焦点请求被丢弃。
• ref指向错误：自定义输入组件没有正确透传ref，导致调用focus()时实际操作的不是当前点击的输入框实例。

修改后的InputField实现参考如下：

import { forwardRef } from 'react';

// 用forwardRef包裹组件，支持ref透传
const InputField = forwardRef<TextInput, InputFieldProps>((props, ref) => {
  const [isFocus, setIsFocus] = useState<boolean>(false);
  const internalInputRef = useRef<TextInput>(null);
  // 合并内部ref和外部透传的ref
  const combinedRef = (ref as React.MutableRefObject<TextInput>) || internalInputRef;

  const onPress = () => {
    combinedRef.current?.focus();
  }

  return (
    {/* 加accessible={false}避免抢占输入框的事件响应权 */}
    <TouchableWithoutFeedback onPress={onPress} accessible={false}>
      <View>
        <TextInput
          {...props}
          ref={combinedRef}
          {/* 先执行透传的回调，再执行内部状态更新逻辑 */}
          onFocus={(e) => {
            props.onFocus?.(e);
            setIsFocus(true);
          }}
          onBlur={(e) => {
            props.onBlur?.(e);
            setIsFocus(false);
          }}
        />
      </View>
    </TouchableWithoutFeedback>
  )
})

如果调整后仍然存在布局干扰问题，可以给KeyboardAvoidingView添加合适的keyboardVerticalOffset属性，避免键盘弹起时的布局重绘影响输入框焦点识别。

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