React Native中如何跳转至指定页面并清除导航栈内其他多余页面

以下方案均不需要重置整个导航栈，也不需要固定计算中间跳转的页面数量：

方案1：使用 popTo 方法（React Navigation 6.x 及以上推荐） #

这是官方提供的原生能力，专门用于回退到导航栈中指定的路由，会自动销毁目标路由之上的所有页面：

• 核心调用逻辑非常简单，在screen4的返回事件中执行即可：
  props.navigation.popTo('home')
  其中home替换为你tab页实际注册的路由名称即可。
• 如果你需要同时拦截Android物理返回键和顶部导航栏的默认返回行为，可以添加以下逻辑：

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

// 拦截物理返回键
useFocusEffect(
  React.useCallback(() => {
    const handleBack = () => {
      props.navigation.popTo('home');
      return true; // 阻止默认返回逻辑
    };
    BackHandler.addEventListener('hardwareBackPress', handleBack);
    return () => BackHandler.removeEventListener('hardwareBackPress', handleBack);
  }, [props.navigation])
);

// 自定义顶部导航栏返回按钮
useLayoutEffect(() => {
  props.navigation.setOptions({
    headerLeft: () => (
      <TouchableOpacity onPress={() => props.navigation.popTo('home')}>
        <Text>返回</Text>
      </TouchableOpacity>
    )
  });
}, [props.navigation]);

方案2：使用 navigate 特性（兼容低版本React Navigation） #

React Navigation的navigate方法默认具备路由复用逻辑：如果跳转的目标路由已经存在于当前导航栈中，会自动回退到该路由，同时销毁它之上的所有页面，效果和popTo完全一致：

• 直接在返回逻辑中调用即可：
  props.navigation.navigate('home')
  该方案适配性更强，不需要依赖高版本API。

方案3：自定义栈动作（嵌套导航场景适用） #

如果你的导航结构为嵌套结构（比如底部Tab导航嵌套在根栈导航中），可以通过dispatch自定义栈动作，精准定位要回退的目标路由：

import { CommonActions } from '@react-navigation/native';

props.navigation.dispatch(state => {
  // 查找tab页在当前栈中的位置
  const tabRouteIndex = state.routes.findIndex(route => route.name === 'home');
  if (tabRouteIndex !== -1) {
    // 回退到目标路由
    return CommonActions.popTo(state.routes[tabRouteIndex].key);
  }
  // 未找到目标路由时 fallback 到默认返回
  return CommonActions.goBack();
});

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