React Native：如何从导航栈中移除订单相关历史页面？

问题场景 #

从任意订单页面通过汉堡菜单跳转到其他页面（如设置）后，要求导航栈仅保留Home和目标页面，无法返回任何订单相关页面。

现有尝试代码 #

const handleNavigation = (route: string) => {
    const routes = navigation.getState().routes;
    console.log('routes before:', routes);
    const orderStartIndex = routes.findIndex(route => route.name === navScreens.orderStart.route);
    console.log('orderStartIndex:', orderStartIndex);
    if (orderStartIndex > -1) {
      navigation.dispatch(StackActions.replace(navScreens.orderStart.route, { params: {} }));
      // navigation.getState().routes.splice(orderStartIndex, 1);
    }
    console.log('routes after:', navigation.getState().routes);
    navigation.replace(route);
};

遇到的问题 #

• 使用StackActions.replace仅替换指定路由，无法移除栈内所有订单页面
• 直接用splice修改navigation.getState().routes会触发路由key错误，导致应用崩溃
• pop只能移除栈顶最新页面，但当前页面为汉堡菜单模态页，无法批量清除订单栈

路由栈配置 #

NavigationConductor.tsx #

import React from 'react';
import { NavigationContainer, RouteProp } from '@react-navigation/native';
import { TransitionPresets, createStackNavigator } from '@react-navigation/stack';
import { default as Main } from './Main';
import { Hamburger, HamburgerMenu } from '@app/components';
import { navRoutesToTitles, navScreens } from '@app/utils';
import type { StackParamsList } from '@app/types';

const Stack = createStackNavigator<StackParamsList>();
function getStackHeaderOptions(route: RouteProp<StackParamsList, string>, navigation: any): any {
  const routes = navigation.getState().routes;
  const routeTitle =
    routes[routes.length - 1].name === navScreens.hamburgerMenu.route
      ? navRoutesToTitles[routes[routes.length - 2].name]
      : navRoutesToTitles[route.name];
  const isHamburgerOpen = route.name === navScreens.hamburgerMenu.route;
  return {
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: '#003069' },
    headerRightContainerStyle: { paddingRight: 20 },
    headerLeftContainerStyle: { paddingLeft: 20 },
    headerTitleStyle: { color: 'hsla(0,0%,100%,.8)' },
    headerTintColor: 'hsla(0,0%,100%,.8)',
    title: routeTitle,
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: () => <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />
  };
}

export default function NavigationConductor() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={navScreens.home.route}
        screenOptions={({ route, navigation }) => getStackHeaderOptions(route, navigation)}
      >
        {Main(Stack)}
        <Stack.Group>
          <Stack.Screen
            name={navScreens.hamburgerMenu.route}
            component={HamburgerMenu}
            options={{ presentation: 'transparentModal' }}
          />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Main.tsx #

import React, { ReactNode } from 'react';
import { Home, Items, OrderComplete, OrderReview, OrderSelectItems, OrderStart, Settings } from '@app/screens';
import { navScreens } from '@app/utils';
import type { NavigationStack } from '@app/types';

export default function Main(Stack: NavigationStack): ReactNode {
  return (
    <Stack.Group>
      <Stack.Screen name={navScreens.home.route} component={Home} />
      <Stack.Screen name={navScreens.items.route} component={Items} />
      <Stack.Screen name={navScreens.orderComplete.route} component={OrderComplete} />
      <Stack.Screen name={navScreens.orderReview.route} component={OrderReview} />
      <Stack.Screen name={navScreens.orderSelectItems.route} component={OrderSelectItems} />
      <Stack.Screen name={navScreens.orderStart.route} component={OrderStart} />
      <Stack.Screen name={navScreens.settings.route} component={Settings} />
    </Stack.Group>
  );
}

解决方案 #

使用StackActions.reset完全重置导航栈，直接指定保留的路由（Home + 目标页面），这是React Navigation官方推荐的修改整个栈的方式，不会触发key错误：

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

const handleNavigation = (route: string) => {
  // 构建重置后的路由数组：如果跳转目标是Home，仅保留Home；否则保留Home和目标页面
  const resetRoutes = route === navScreens.home.route 
    ? [{ name: route }] 
    : [
        { name: navScreens.home.route },
        { name: route }
      ];

  // 重置导航栈，index设为数组最后一位，确保目标页面在栈顶
  navigation.dispatch(
    StackActions.reset({
      routes: resetRoutes,
      index: resetRoutes.length - 1,
    })
  );
};

原理说明 #

• StackActions.reset会完全替换当前导航栈的所有路由，彻底清除之前的订单页面残留
• 由于汉堡菜单是transparentModal模态页，重置主栈的同时会自动关闭模态页，无需额外处理
• 严格通过官方API修改栈状态，避免直接操作navigation.getState()导致的key不匹配问题

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