React Native：如何重写返回按钮/侧滑返回功能并指定跳转页面

需求：进入页面时若带有previousScreen参数，点击返回或侧滑返回时，通过navigation.navigate(previousScreen)跳转到指定页面，而非默认返回逻辑。尝试了两段代码，点击时均触发最大调用栈错误，怀疑和useEffect依赖有关，求正确实现方案。

尝试的代码1：

React.useEffect(() => {
  const handleBeforeRemove = e => {
    e.preventDefault();

    if (!previousScreen) {
      navigation.dispatch(e.data.action);
    } else {
      navigation.navigate(previousScreen);
    }
  };

  if (previousScreen) {
    const unsubscribe = navigation.addListener(
      'beforeRemove',
      handleBeforeRemove,
    );

    return unsubscribe;
  }
}, [navigation, previousScreen]);

尝试的代码2：

const backAction = e => {
  e.preventDefault();

  if (previousScreen) {
    navigation.navigate(previousScreen);
    return;
  }

  if (!previousScreen) {
    navigation.dispatch(e.data.action);
    return true;
  }

  return;
};

useEffect(() => {
  navigation.addListener('beforeRemove', backAction);
  return () => {
    navigation.removeListener('beforeRemove', backAction);
  };
}, []);

错误原因分析 #

两段代码的核心问题都是无限循环触发beforeRemove事件：

• 代码1中，调用navigation.navigate(previousScreen)会触发当前页面的beforeRemove事件，而事件处理逻辑里又再次调用navigate，形成循环调用导致栈溢出。
• 代码2不仅存在同样的循环问题，useEffect依赖为空数组还会导致backAction里的previousScreen始终是初始值，逻辑判断失效。

正确实现方案 #

解决思路：在处理beforeRemove事件时，先移除当前页面的监听，避免跳转时重复触发事件；同时确保依赖项正确，避免闭包问题。

React.useEffect(() => {
  let unsubscribe;

  const handleBeforeRemove = (e) => {
    // 阻止默认返回行为
    e.preventDefault();

    // 无指定页面时执行默认返回
    if (!previousScreen) {
      navigation.dispatch(e.data.action);
      return;
    }

    // 先移除监听，再执行跳转，避免循环触发
    unsubscribe?.();
    navigation.navigate(previousScreen);
  };

  // 仅当存在指定返回页面时添加监听
  if (previousScreen) {
    unsubscribe = navigation.addListener('beforeRemove', handleBeforeRemove);
  }

  // 组件卸载时统一清理监听
  return () => {
    unsubscribe?.();
  };
}, [navigation, previousScreen]);

关键优化点： #

• 跳转前先移除beforeRemove监听，切断循环触发的链路。
• useEffect依赖包含navigation和previousScreen，确保逻辑能响应参数变化。
• 统一清理逻辑，避免内存泄漏。

如果需要兼容Android物理返回键，可额外添加hardwareBackPress监听：

import { BackHandler } from 'react-native';

React.useEffect(() => {
  let backPressUnsubscribe;
  let beforeRemoveUnsubscribe;

  const handlePhysicalBack = () => {
    if (previousScreen) {
      // 清理所有监听后跳转
      beforeRemoveUnsubscribe?.();
      backPressUnsubscribe?.();
      navigation.navigate(previousScreen);
      return true; // 阻止系统默认返回
    }
    return false; // 执行默认返回
  };

  const handleBeforeRemove = (e) => {
    e.preventDefault();
    if (!previousScreen) {
      navigation.dispatch(e.data.action);
      return;
    }
    beforeRemoveUnsubscribe?.();
    backPressUnsubscribe?.();
    navigation.navigate(previousScreen);
  };

  if (previousScreen) {
    beforeRemoveUnsubscribe = navigation.addListener('beforeRemove', handleBeforeRemove);
    backPressUnsubscribe = BackHandler.addEventListener('hardwareBackPress', handlePhysicalBack);
  }

  return () => {
    beforeRemoveUnsubscribe?.();
    backPressUnsubscribe?.();
  };
}, [navigation, previousScreen]);

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