React Native安卓：键盘打开时BackHandler失效，需监听返回键关闭视图

这个安卓上的硬件返回键坑我之前踩过！太懂你那种明明按了返回键关键盘，结果视图就是不关闭的憋屈感了😅。问题出在安卓系统的处理逻辑上：当你按下硬件返回键关闭键盘时，系统会先关闭键盘，但不会自动触发TextInput的onBlur事件；而你之前的BackHandler和Keyboard监听之所以没起作用，是因为事件触发时机不对——BackHandler在键盘关闭前就触发了，但此时键盘状态还没更新，keyboardDidHide要等键盘完全关闭后才执行，这时候已经错过了触发视图关闭的时机。

下面给你两种可行的解决方案，类组件和函数组件版本都有：

类组件解决方案 #

步骤1：定义Ref和状态 #

先给TextInput添加一个ref，方便手动调用失焦方法，同时用状态维护键盘的显示状态：

constructor(props) {
  super(props);
  this.state = {
    isKeyboardVisible: false,
    showTargetView: true // 你要关闭的视图状态
  };
  // 创建TextInput的ref
  this.textInputRef = React.createRef();
}

步骤2：添加监听（生命周期） #

在componentDidMount里注册键盘和返回键的监听，componentWillUnmount里移除监听避免内存泄漏：

componentDidMount() {
  // 监听键盘显示/隐藏，更新状态
  this.keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
    this.setState({ isKeyboardVisible: true });
  });
  this.keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
    this.setState({ isKeyboardVisible: false });
  });
  // 监听硬件返回键
  this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}

componentWillUnmount() {
  this.keyboardShowListener.remove();
  this.keyboardHideListener.remove();
  this.backHandler.remove();
}

步骤3：处理返回键逻辑 #

在返回键处理函数里，判断如果键盘处于打开状态，就手动让TextInput失焦（触发onBlur），同时拦截默认的返回行为；如果键盘没开，就交给系统处理返回：

handleBackPress = () => {
  if (this.state.isKeyboardVisible && this.textInputRef.current) {
    // 手动触发失焦，这会调用onBlur事件
    this.textInputRef.current.blur();
    // 返回true表示拦截默认返回行为（只关闭键盘，不退出页面）
    return true;
  }
  // 键盘未打开，让系统处理返回（比如退出页面）
  return false;
}

步骤4：关联TextInput和onBlur #

把ref绑定到TextInput上，同时在onBlur里写关闭视图的逻辑：

<TextInput
  ref={this.textInputRef}
  onBlur={() => {
    // 这里写你关闭目标视图的逻辑
    this.setState({ showTargetView: false });
  }}
  // 其他TextInput属性（比如placeholder、style等）
/>

函数组件解决方案 #

如果你用的是函数组件，用useRef和useEffect可以实现同样的效果：

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

const YourComponent = () => {
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
  const [showTargetView, setShowTargetView] = useState(true);
  const textInputRef = useRef(null);

  useEffect(() => {
    // 注册监听
    const keyboardShow = Keyboard.addListener('keyboardDidShow', () => {
      setIsKeyboardVisible(true);
    });
    const keyboardHide = Keyboard.addListener('keyboardDidHide', () => {
      setIsKeyboardVisible(false);
    });
    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);

    // 组件卸载时移除监听
    return () => {
      keyboardShow.remove();
      keyboardHide.remove();
      backHandler.remove();
    };
  }, []);

  const handleBackPress = () => {
    if (isKeyboardVisible && textInputRef.current) {
      textInputRef.current.blur();
      return true;
    }
    return false;
  };

  return (
    <>
      {/* 你要关闭的视图 */}
      {showTargetView && <View style={{ padding: 20, backgroundColor: '#eee' }}>
        <Text>需要关闭的视图</Text>
      </View>}
      {/* TextInput */}
      <TextInput
        ref={textInputRef}
        onBlur={() => setShowTargetView(false)}
        placeholder="输入内容试试"
        style={{ borderWidth: 1, padding: 10, marginTop: 20 }}
      />
    </>
  );
};

export default YourComponent;

为什么这个方案有效？ #

通过手动调用textInputRef.current.blur()，我们强制触发了TextInput的onBlur事件，不管系统有没有自动更新焦点状态。同时结合键盘状态的判断，确保只有在键盘打开时才拦截返回键，不影响正常的页面返回逻辑。

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