React 导航，如何从完全不同的堆栈重置屏幕或整个堆栈

Question

const ListStack = createStackNavigator();

function ListPage() {
  return (
    <ListStack.Navigator screenOptions={{headerShown: false}}>
      <ListStack.Screen name="List" component={ListStackComponent} />
      <ListStack.Screen name="ItemDetail" component={ItemDetailComponent} />
    </ListStack.Navigator>
  );
}

const ItemPaymentStack = createStackNavigator();

function PaymentPage() {
  return (
    <ItemPaymentStack.Navigator screenOptions={{headerShown: false}}>
      <ItemPaymentStack.Screen name="Payments" component={Payments} />
    </ItemPaymentStack.Navigator>
  );
}

const AppDrawer = createDrawerNavigator();

<AppDrawer.Navigator
  screenOptions={{headerShown: false}}
>
    <AppDrawer.Screen name="ListPage_stack" component={ListPage}/>
    <AppDrawer.Screen name="Payment_stack" component={PaymentPage}/>
</AppDrawer.Navigator>

我有 2 个堆栈导航器，如上所述，

1. 在物品列表页面。通过使用此代码，应用程序导航到项目详细信息页面。
   

   navigation.navigate('ItemDetail', {key: item_id, item_id: item_id});

2. 通过按商品详细信息页面上的付款选项，应用程序使用以下代码导航到付款页面。

   navigation.navigate('Payment_stack', { screen: 'Payments'});

现在，我的问题是当用户导航回列表页面时如何重置/清除数据或卸载付款屏幕，因为从列表中选择另一个项目后，付款屏幕会显示以前的项目数据，直到我使用 useFocusEffect 清除页面。 有没有办法从列表页面清除付款屏幕或完全删除列表页面上的付款堆栈？

Answer 1

是的，您可以使用很多方法来解决这个问题。我建议你使用

Redux

:

选择项目后，将所选项目发送到存储。 在Payment类中，只要听一下item，每次进入Payment页面都会得到最新的item