React Native中BackHandler异常：非主页面按返回键直接退出App

看起来你遇到的问题是当前返回键监听逻辑存在两处关键漏洞，导致所有页面按返回都会直接退出App。我来帮你梳理问题根源，然后给出针对性的修复方案：

问题分析 #

1. 监听移除失效：你在componentWillUnMount里调用this.BackButtonPressed.bind(this)，但每次bind都会生成全新的函数实例——这和你在componentDidMount中添加的监听函数不是同一个引用，导致监听永远无法被正确移除。当你跳转到其他页面时，Dashboard的返回键监听仍然在后台生效。
2. 路由名判断错误：你判断的this.props.navigation.state.routeName是Dashboard组件自身的路由名，不管你跳转到StackNavigator里的哪个子页面，这个值始终是"Dashboard"，所以每次按返回都会触发退出逻辑。

修复方案一：修改Dashboard组件的实现 #

步骤1：提前绑定事件处理函数 #

在构造函数中绑定this，确保添加和移除监听时用的是同一个函数引用：

constructor(props) {
  super(props);
  // 提前绑定this，避免每次bind生成新函数
  this.BackButtonPressed = this.BackButtonPressed.bind(this);
}

步骤2：修正生命周期方法 #

移除多余的bind(this)，直接使用绑定好的函数：

componentDidMount() {
  BackHandler.addEventListener('hardwareBackPress', this.BackButtonPressed);
}

componentWillUnmount() {
  BackHandler.removeEventListener('hardwareBackPress', this.BackButtonPressed);
}

步骤3：正确获取当前活跃路由名 #

修改返回键处理函数，获取StackNavigator中当前显示页面的路由名：

BackButtonPressed() {
  // 获取StackNavigator的状态
  const stackNavigationState = this.props.navigation.state;
  // 取当前活跃的路由（index对应栈的顶部页面）
  const currentRoute = stackNavigationState.routes[stackNavigationState.index];
  
  if (currentRoute.routeName === "Dashboard") {
    BackHandler.exitApp();
    return true; // 告诉系统我们已处理返回事件
  } else {
    // 让系统执行默认返回行为（回到上一页）
    return false;
  }
}

修复方案二：全局在根组件处理返回事件 #

如果你希望更统一地控制整个App的返回行为，可以在根组件中添加全局监听：

import React, { Component } from 'react';
import { BackHandler } from 'react-native';
import { NavigationActions } from 'react-navigation';
import DrawersNavigator from './path/to/your/navigator-file';

class App extends Component {
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
  }

  handleBackPress = () => {
    // 获取根导航的状态
    const rootNavState = this.navigator.dangerouslyGetState();
    // 找到嵌套的StackNavigator的状态（你的Drawer里嵌套了StackNavigator）
    const stackNavState = rootNavState.routes[rootNavState.index].state;
    const currentRouteName = stackNavState.routes[stackNavState.index].routeName;

    if (currentRouteName === "Dashboard") {
      // 在Dashboard页触发退出App
      BackHandler.exitApp();
      return true;
    } else {
      // 其他页面执行返回上一页操作
      this.navigator.dispatch(NavigationActions.back());
      return true;
    }
  };

  render() {
    // 给导航组件添加ref，方便获取状态和分发事件
    return <DrawersNavigator ref={nav => this.navigator = nav} />;
  }
}

export default App;

测试提示 #

修复完成后记得验证：在Dashboard页按返回键应该直接退出App，在其他页面按返回键应该回到上一级页面，而非退出。

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