React Navigation：如何从其他栈重置页面或移除支付栈？

针对支付页面数据残留的问题，这里有几种可行的处理方式：

1. 在列表页监听焦点事件，重置支付栈 #

当用户回到列表页时，通过监听页面焦点，主动重置Payment_stack的导航状态，让它回到初始状态，下次进入支付页时就是全新的实例。

在ListStackComponent（商品列表页组件）中添加如下代码：

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

function ListStackComponent({ navigation }) {
  useFocusEffect(
    React.useCallback(() => {
      // 获取Drawer导航实例
      const drawerNavigation = navigation.getParent();
      if (drawerNavigation) {
        // 重置Payment_stack到初始的Payments页面
        drawerNavigation.dispatch(
          CommonActions.reset({
            index: 0,
            routes: [
              { name: 'ListPage_stack' },
              { 
                name: 'Payment_stack',
                state: {
                  routes: [{ name: 'Payments' }]
                }
              }
            ]
          })
        );
      }
    }, [navigation])
  );

  // 原有组件逻辑...
}

2. 在支付页内部自动重置状态 #

不需要修改导航结构，直接在Payments组件中监听焦点，每次进入时清空或重新加载数据：

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

function Payments({ route }) {
  const [paymentData, setPaymentData] = React.useState({});

  useFocusEffect(
    React.useCallback(() => {
      // 每次页面获得焦点时重置数据
      setPaymentData({});
      // 如果需要根据路由参数重新加载商品数据，可在此处添加逻辑
      if (route.params?.item_id) {
        // 调用接口获取对应商品的支付数据
      }
    }, [route.params])
  );

  // 原有组件逻辑...
}

3. 调整导航结构（可选） #

如果允许修改现有导航结构，把Payments页面并入ListStack，这样从详情页跳转到支付页后，回到列表页时支付页会被弹出栈并自动卸载：

// 修改ListStack定义
const ListStack = createStackNavigator();

function ListPage() {
  return (
    <ListStack.Navigator screenOptions={{headerShown: false}}>
      <ListStack.Screen name="List" component={ListStackComponent} />
      <ListStack.Screen name="ItemDetail" component={ItemDetailComponent} />
      <ListStack.Screen name="Payments" component={Payments} /> {/* 新增支付页 */}
    </ListStack.Navigator>
  );
}

// 详情页跳转代码改为
navigation.navigate('Payments', { item_id: 你的商品ID });

以上方案中，第一种直接从列表页重置整个支付栈，最贴合你的需求；第三种调整结构的方式更彻底，能从根源避免页面状态残留，可根据业务场景选择。

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