React Native 如何实现返回键按下跳转指定页面并处理重复弹窗问题

React Navigation 的beforeRemove监听器会捕获所有会导致当前页面从导航栈移除的行为：

• 系统物理返回键触发的返回动作
• 代码主动调用navigate/replace/goBack等API发起的跳转动作
  只要触发了移除，就会进入监听器回调。你当前的代码没有做授权判断，只要监听器触发就会执行e.preventDefault()拦截动作、弹出确认框。
  当你点击「是」调用navigation.navigate('SignUp')时，这个跳转本身会再次触发当前页面的beforeRemove回调，被拦截逻辑再次拦住，最终形成无限弹窗循环，无法完成跳转。

增加一个全局的离开授权标记，一旦用户在确认框点击「是」，就将标记置为已授权状态：

• 后续触发的所有页面移除动作，直接放行，不再拦截、不再弹框
• 跳转动作在授权标记设置完成后再执行，就不会被自身的拦截逻辑挡住

因为导航事件是同步触发的，需要用useRef存储授权标记，避免异步state更新导致的判断延迟；同时必须给导航监听器增加卸载清理逻辑，避免内存泄漏和重复绑定问题。
修复后的代码：

import {useRef, useEffect} from 'react';

// 组件内部定义授权标记
const isAuthorizedToLeave = useRef(false);

useEffect(() => {
  const unsubscribe = navigation.addListener('beforeRemove', (e) => {
    // 已授权离开，直接放行原有导航动作
    if (isAuthorizedToLeave.current) {
      return;
    }

    // 未授权则拦截默认移除行为
    e.preventDefault();

    Alert.alert(
      'Registration Process',
      'Are you sure you want to cancel the registration process?',
      [
        {
          text: 'Yes',
          style: 'destructive',
          onPress: () => {
            // 先标记为已授权
            isAuthorizedToLeave.current = true;
            // 再执行跳转
            navigation.navigate('SignUp');
          },
        },
        {
          text: 'No',
          style: 'cancel',
          onPress: () => {}
        },
      ],
    );
  });

  // 组件卸载时移除监听器
  return unsubscribe;
}, [navigation]);

• 不要用useState存授权标记：导航事件同步执行时，异步的state更新会导致标记值无法被及时读取，依然会出现拦截跳转的问题
• 如果这个页面需要重新被打开（比如从其他页切回来），可以在页面聚焦的监听器里把isAuthorizedToLeave.current重置为false，恢复正常的返回拦截逻辑

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