React Native栈导航中BackHandler返回按钮触发异常的解决方法

这个问题我之前也碰到过，核心原因其实是Stack Navigator的页面栈机制：当你从Screen B跳转到Screen C时，Screen B并没有被卸载（Stack Navigator会把之前的页面保留在栈中，方便快速返回），所以你的componentWillUnmount方法根本没触发，导致Screen B添加的BackHandler监听一直挂在全局，不管你在哪个页面按返回键，都会优先触发这个监听。

下面给你几个靠谱的解决思路，按推荐程度排序：

1. 监听页面焦点状态（最可靠） #

利用React Navigation提供的页面焦点事件，只有当Screen B处于前台（获得焦点）时才添加BackHandler监听，失去焦点就移除。

类组件写法 #

componentDidMount() {
  // 页面获得焦点时添加监听
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  });
  // 页面失去焦点时移除监听
  this.blurListener = this.props.navigation.addListener('didBlur', () => {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  });
}

componentWillUnmount() {
  // 清理导航监听
  this.focusListener.remove();
  this.blurListener.remove();
  // 保险起见，再移除一次BackHandler监听
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

函数组件写法（推荐用新API） #

如果你的组件是函数式的，用React Navigation提供的useFocusEffect钩子更简洁：

import { useFocusEffect } from '@react-navigation/native';
import { BackHandler } from 'react-native';
import React from 'react';

function ScreenB({ navigation }) {
  useFocusEffect(
    React.useCallback(() => {
      const handleBackButtonClick = () => {
        // 这里写你的自定义返回逻辑
        console.log('在Screen B触发返回');
        return true; // 返回true表示拦截默认返回行为
      };

      BackHandler.addEventListener('hardwareBackPress', handleBackButtonClick);

      // 组件失去焦点时自动执行清理函数
      return () => {
        BackHandler.removeEventListener('hardwareBackPress', handleBackButtonClick);
      };
    }, [])
  );

  // 其他组件逻辑...
}

2. 在监听函数里判断当前路由 #

如果不想改太多代码，可以在handleBackButtonClick里加个判断：只有当前活跃页面是Screen B时，才执行自定义逻辑，否则交给默认的返回行为。

handleBackButtonClick = () => {
  // 获取当前活跃路由的名称
  const currentRoute = this.props.navigation.getCurrentRoute().name;
  if (currentRoute !== 'ScreenB') {
    return false; // 返回false，让默认的返回逻辑生效
  }
  
  // 你的自定义返回逻辑
  // 比如：弹出确认对话框，或者跳转到指定页面
  return true; // 拦截默认返回
};

这个方法比较简单，但依赖路由名称的判断，不如焦点监听精准，适合快速临时修复。

3. 注意BackHandler的全局特性 #

BackHandler的监听是全局生效的，多个页面的监听会按添加顺序执行，直到有一个监听返回true就停止后续处理。所以一定要确保：只有当前显示的页面才保留有效的BackHandler监听，其他页面的监听都要及时移除。

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