React Navigation使用beforeRemove时报Maximum call stack size exceeded错误

你代码触发死循环的核心逻辑是：
beforeRemove是页面即将被从导航栈移除前触发的事件，你调用e.preventDefault()阻止默认移除行为后，紧接着执行的navigation.popToTop()/navigate()这类导航操作，本身会再次触发当前页面的beforeRemove事件，逻辑无限递归执行最终导致栈溢出。

新增跳转状态锁避免重复触发监听逻辑，同时补充监听的卸载逻辑防止内存泄漏，修改后代码如下：

useEffect(() => {
  // 跳转状态锁，防止重复触发
  let isRedirecting = false
  const removeListener = navigation.addListener("beforeRemove", (e) => {
    // 已处于跳转流程中直接放行
    if (isRedirecting) return
    e.preventDefault()
    // 标记跳转状态，下次触发监听直接跳过
    isRedirecting = true
    // 此处可替换为你需要的任意跳转逻辑
    navigation.popToTop()
  })
  // 组件卸载时移除监听
  return removeListener
}, [navigation])

• 若你要跳转的目标页面和当前页面为同一页面，需要额外新增路由名判断，避免重复跳转触发监听
• 以上逻辑适配React Navigation 5及以上版本，无需额外调整API调用方式

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