React Native底部导航栏自定义返回按钮不遵循路由栈问题求解

问题根因 #

你当前的自定义返回按钮逻辑未判断当前Tab下子路由栈的层级，要么直接跳转至Tab根页面，要么调用回退方法时指定了根路由参数，和安卓系统返回键默认的逐层判断栈深度逻辑不一致。

修复步骤 #

以下方案基于react-navigation路由库（RN生态最常用的路由方案，安卓系统返回键默认适配该库的回退逻辑）：

1. 获取当前Tab子栈的路由深度
   使用useNavigationState钩子获取当前激活Tab对应的子路由栈长度，Tab根页对应长度为1，每跳转一个新页面长度+1：

import { useNavigation, useNavigationState } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';

2. 编写对齐系统返回键的点击逻辑
   判断栈深度大于1时执行正常回退，等于1时再执行Tab根页的自定义逻辑（如退出应用等）：

const TabBarCustomBackButton = () => {
  const navigation = useNavigation();
  // 获取当前Tab子栈的路由数量
  const currentTabStackLength = useNavigationState(state => {
    const activeTabRoute = state.routes[state.index];
    return activeTabRoute.state?.routes.length ?? 1;
  });

  const handleBackPress = () => {
    if (currentTabStackLength > 1) {
      // 子栈存在多层路由，逐层回退，和系统返回键逻辑完全对齐
      navigation.goBack();
    } else {
      // 已到Tab根页，执行你需要的根页返回逻辑
      // 示例：退出应用 BackHandler.exitApp()
    }
  };

  return (
    <TouchableOpacity onPress={handleBackPress}>
      {/* 你的自定义返回按钮图标 */}
    </TouchableOpacity>
  );
};

注意事项 #

• 如果你使用的是react-navigation v5以下版本，可替换为navigation.dangerouslyGetState()获取路由状态，判断逻辑和上述代码一致
• 禁止在返回逻辑中直接调用navigation.popToTop()，该方法会直接回到栈根页，就是你当前遇到的直接跳转首页的问题
• 如果是多层嵌套路由结构，只需要调整useNavigationState中获取子栈的逻辑，对齐当前页面所在的路由栈即可

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