componentWillUnmount失效求助：跳转页面后无法移除BackHandler事件监听器

我完全懂你遇到的困扰——用this.props.navigation.navigate('newScreen')跳转到新页面后，原页面的componentWillUnmount根本没执行，导致硬件返回键的监听器一直挂着，没法正常移除对吧？

问题根源 #

React Navigation的navigate方法是把新页面压入导航栈，原页面并没有被卸载，只是被放到了栈的后台。而componentWillUnmount只有在组件被完全从组件树中移除时才会触发，所以这种场景下它不会执行。

解决方案 #

根据你的需求，我给你两种常用的处理方式：

1. 类组件：用导航焦点监听来管理监听器

如果希望页面失去焦点时就移除监听器（不管是跳转到新页面还是返回上一页），可以用withNavigationFocus高阶组件来监听页面的焦点状态：

import React from 'react';
import { BackHandler } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class YourComponent extends React.Component {
  componentDidMount() {
    // 组件挂载且处于焦点状态时添加监听器
    if (this.props.isFocused) {
      this.addBackHandler();
    }
  }

  componentDidUpdate(prevProps) {
    // 页面从失焦变为聚焦：添加监听器
    if (this.props.isFocused && !prevProps.isFocused) {
      this.addBackHandler();
    }
    // 页面从聚焦变为失焦：移除监听器
    else if (!this.props.isFocused && prevProps.isFocused) {
      this.removeBackHandler();
    }
  }

  componentWillUnmount() {
    // 确保组件真正卸载时也清理监听器
    this.removeBackHandler();
  }

  addBackHandler = () => {
    this.backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      this.handleBackPress
    );
  };

  removeBackHandler = () => {
    if (this.backHandler) {
      console.warn('removed');
      this.backHandler.remove();
      this.backHandler = null;
    }
  };

  handleBackPress = () => {
    return true;
  };
}

// 用withNavigationFocus包裹组件，注入isFocused属性
export default withNavigationFocus(YourComponent);

2. 函数组件：用useFocusEffect钩子（更简洁）

如果是函数组件，React Navigation提供了useFocusEffect钩子，专门处理这类聚焦/失焦的逻辑：

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

function YourComponent() {
  useFocusEffect(
    React.useCallback(() => {
      // 定义返回键处理函数
      const handleBackPress = () => {
        return true;
      };

      // 添加监听器
      const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        handleBackPress
      );

      // 返回的清理函数会在页面失去焦点时自动执行
      return () => {
        console.warn('removed');
        backHandler.remove();
      };
    }, []) // 空依赖数组确保只执行一次
  );

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

export default YourComponent;

额外场景：仅在页面被卸载时移除监听器

如果你的需求是只有当页面被完全从导航栈中移除时才清理监听器，那componentWillUnmount本身是正确的，但你需要替换跳转方式：

• 用this.props.navigation.replace('newScreen')：替换当前页面，原页面会被卸载，触发componentWillUnmount
• 或者在后续页面使用navigation.popToTop()、navigation.pop(n)等操作，把原页面从栈中移除

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