React Native Navigation：如何让返回按钮跳转至栈首页面？

错误原因 #

你之前用useEffect或useFocusEffect直接执行跳转逻辑，会导致无限循环：页面聚焦时触发跳转，跳转后页面状态变化又重新触发聚焦/effect，反复执行最终引发栈溢出错误。核心问题是把跳转逻辑放在了页面加载/聚焦的自动触发钩子中，而非用户点击返回按钮的触发时机。

正确解决方案 #

通过拦截返回按钮的触发事件，仅在用户点击返回时执行跳转至栈首页的操作，避免自动循环。以下是React Navigation 6+的实现代码：

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

const TargetScreen = () => {
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      // 处理安卓物理返回键
      const handleHardwareBack = () => {
        navigation.popToTop(); // 弹出栈内非首页的所有页面，跳转至首页
        return true; // 阻止默认返回行为
      };

      // 处理导航栏返回按钮（软件返回）
      const unsubscribeNav = navigation.addListener('beforeRemove', (e) => {
        e.preventDefault(); // 取消默认返回动作
        navigation.popToTop();
      });

      // 绑定物理返回监听
      const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        handleHardwareBack
      );

      // 组件卸载时清理监听，避免内存泄漏
      return () => {
        backHandler.remove();
        unsubscribeNav();
      };
    }, [navigation])
  );

  return (
    // 你的页面内容
  );
};

export default TargetScreen;

关键说明 #

• popToTop()是React Navigation栈导航内置方法，专门用于跳转到当前栈的首页面，并自动弹出中间所有页面，无需手动计算跳转层级。
• 同时拦截物理返回键和导航栏返回按钮，覆盖所有返回场景。
• 必须在组件卸载时移除监听，防止内存泄漏和异常触发。

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