如何在React Navigation中修改默认返回逻辑，自定义返回跳转目标页面

针对你提到的提交订单后跳转至订单页、返回需直接回首页的场景，有两种常用的实现方案，优先推荐第一种：

方案1：跳转时替换/重置路由栈（首推） #

提交订单后跳转到OrderPlaced页面时，直接替换当前栈顶的路由，把ConfirmOrder从路由栈中移除，用户点击返回时自然就会跳转到上一层的Home页面，无需额外拦截返回事件。
示例代码如下：

// ConfirmOrder 页面提交订单成功后执行
// 写法1：替换当前栈顶路由
navigation.replace('OrderPlaced')

// 写法2：直接重置路由栈，明确指定返回后到Home，兼容性更强
navigation.reset({
  index: 1,
  routes: [
    { name: 'Home' },
    { name: 'OrderPlaced' }
  ]
})

方案优势：

• 路由栈逻辑清晰，没有冗余的历史页面
• 无需额外处理物理返回键、顶部返回按钮的点击事件，适配所有返回触发场景

方案2：拦截返回事件自定义跳转逻辑 #

如果你的场景需要保留ConfirmOrder在路由栈中，只是点击返回时要跳转到指定页面，可以通过监听返回事件实现：

import { useFocusEffect, useLayoutEffect } from '@react-navigation/native';
import { BackHandler, TouchableOpacity, Text } from 'react-native';

function OrderPlaced({ navigation }) {
  // 拦截设备物理返回键
  useFocusEffect(
    React.useCallback(() => {
      const handleBackPress = () => {
        navigation.navigate('Home');
        // 返回true表示拦截默认返回行为
        return true;
      };
      BackHandler.addEventListener('hardwareBackPress', handleBackPress);
      return () => BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
    }, [navigation])
  );

  // 自定义顶部导航栏的返回按钮，覆盖默认返回逻辑
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <TouchableOpacity onPress={() => navigation.navigate('Home')}>
          <Text>返回</Text>
          {/* 可替换为你项目中的返回图标组件 */}
        </TouchableOpacity>
      )
    })
  }, [navigation])

  // 页面其余业务逻辑
}

以上两种方案兼容React Navigation 6及以上版本，更低版本的reset方法参数写法略有差异，可根据你使用的版本调整即可。

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