React Native应用按下返回键直接退出问题求助（SDK更新后）

问题现象 #

SDK更新前应用运行正常，更新后iOS（通过Expo测试）和Android设备按下返回键会直接关闭应用，无法触发原本的退出确认弹窗。

原因分析 #

@react-navigation/native 或其依赖更新后，导航容器的默认返回键处理逻辑优先级高于全局的BackHandler监听，导致自定义的退出确认逻辑被覆盖。此外原代码未判断当前页面路由状态，无论在哪一页按下返回键都会触发退出确认，不符合正常导航逻辑。

修复方案 #

通过获取导航容器的引用，判断当前是否处于根路由，再决定执行退出确认还是默认返回行为：

修改App.js代码如下：

// App.js
import React, { useEffect, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './AppNavigator';
import { BackHandler, Alert } from 'react-native';

const App = () => {
  const navigationRef = useRef(null);

  useEffect(() => {
    const backAction = () => {
      // 获取当前活跃的路由名称
      const currentRoute = navigationRef.current?.getCurrentRoute()?.name;
      
      // 仅在根页面（MainPage）触发退出确认
      if (currentRoute === 'MainPage') {
        Alert.alert("Hold on!", "Are you sure you want to go back?", [
          {
            text: "Cancel",
            onPress: () => null,
            style: "cancel"
          },
          { text: "YES", onPress: () => BackHandler.exitApp() }
        ]);
        return true; // 阻止系统默认返回行为
      }
      
      // 非根页面，执行正常返回上一页逻辑
      navigationRef.current?.goBack();
      return true;
    };

    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);

    return () => backHandler.remove();
  }, []);

  return (
    <NavigationContainer ref={navigationRef}>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;

补充说明 #

• 确保你的@react-navigation/native版本为v6及以上（getCurrentRoute()方法仅在该版本及以上支持）
• 修复后逻辑更合理：仅在根页面触发退出确认，其他页面按下返回键正常返回上一页
• 若使用Expo，可通过expo doctor命令检查依赖版本兼容性，避免因版本不匹配引发其他问题

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