React Native：KeyboardAwareScrollView切换TextInput时键盘隐藏问题

嘿，我之前也碰到过这个坑！用KeyboardAwareScrollView的时候，切换输入框莫名失焦确实挺闹心的，大概率是组件的默认滚动调整逻辑干扰了输入框的焦点状态。下面给你几个亲测有效的解决方案：

直接给每个TextInput加ref，在当前输入框的onSubmitEditing事件里直接让下一个输入框获取焦点，跳过系统自动切换可能触发的失焦步骤。还能顺便把键盘的回车按钮改成“下一个”，用户体验也更好。

import React, { useRef } from 'react';
import { TextInput, TouchableOpacity, Text, Keyboard } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const FormScreen = () => {
  const input1Ref = useRef(null);
  const input2Ref = useRef(null);
  const input3Ref = useRef(null);

  const handleSubmit = () => {
    // 这里写你的提交逻辑
    console.log('表单提交');
    // 提交完成后手动关闭键盘
    Keyboard.dismiss();
  };

  return (
    <KeyboardAwareScrollView
      enableOnAndroid={true}
      extraScrollHeight={30} // 给键盘留一点额外空间，避免输入框被挡住
    >
      <TextInput
        ref={input1Ref}
        placeholder="第一个输入框"
        style={{ height: 50, borderWidth: 1, margin: 10, padding: 10 }}
        onSubmitEditing={() => input2Ref.current?.focus()}
        returnKeyType="next"
      />
      <TextInput
        ref={input2Ref}
        placeholder="第二个输入框"
        style={{ height: 50, borderWidth: 1, margin: 10, padding: 10 }}
        onSubmitEditing={() => input3Ref.current?.focus()}
        returnKeyType="next"
      />
      <TextInput
        ref={input3Ref}
        placeholder="第三个输入框"
        style={{ height: 50, borderWidth: 1, margin: 10, padding: 10 }}
        onSubmitEditing={handleSubmit}
        returnKeyType="done"
      />
      <TouchableOpacity
        onPress={handleSubmit}
        style={{ backgroundColor: '#2196F3', padding: 15, margin: 10, borderRadius: 5 }}
      >
        <Text style={{ color: 'white', textAlign: 'center' }}>提交表单</Text>
      </TouchableOpacity>
    </KeyboardAwareScrollView>
  );
};

export default FormScreen;

有时候组件的自动滚动调整会“误触”输入框失焦，你可以试试关闭一些自动行为：

• 把enableAutomaticScroll设为false，禁止组件自动滚动调整
• Android端设置keyboardDismissMode为none，避免滚动时隐藏键盘
• 关闭scrollToOverflowEnabled，防止滚动过度导致焦点丢失

<KeyboardAwareScrollView
  enableOnAndroid={true}
  enableAutomaticScroll={false}
  scrollToOverflowEnabled={false}
  androidScrollViewProps={{
    keyboardDismissMode: 'none'
  }}
>
  {/* 你的输入框和按钮 */}
</KeyboardAwareScrollView>

如果上面两种方法都没解决，可以在TextInput的onBlur事件里判断是否是切换输入框导致的失焦，如果是就重新聚焦。不过这个方法有点绕，适合特殊场景：

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

const CustomInput = ({ nextRef, ...props }) => {
  const inputRef = useRef(null);
  const [isSwitching, setIsSwitching] = useState(false);

  const handleSubmitEditing = () => {
    setIsSwitching(true);
    nextRef.current?.focus();
    // 延迟重置状态，避免影响正常失焦
    setTimeout(() => setIsSwitching(false), 100);
  };

  const handleBlur = () => {
    if (isSwitching) {
      inputRef.current?.focus();
    }
  };

  return (
    <TextInput
      ref={inputRef}
      onSubmitEditing={handleSubmitEditing}
      onBlur={handleBlur}
      {...props}
    />
  );
};

// 使用的时候
const input1Ref = useRef(null);
const input2Ref = useRef(null);

<CustomInput
  ref={input1Ref}
  nextRef={input2Ref}
  placeholder="输入框1"
  returnKeyType="next"
/>
<CustomInput
  ref={input2Ref}
  placeholder="输入框2"
  returnKeyType="done"
/>

最后别忘了，提交按钮点击时一定要手动调用Keyboard.dismiss()，这样键盘就会乖乖等到提交完成再关闭啦！

内容的提问来源于stack exchange，提问作者Fuad Paşayev