如何在 stack navigator (react-navigation 2.X) 中卸载之前安装的组件？

Question

这是我的应用程序的简化流程：-

1. 登录
2. 主页（可以选择为图表着色或创建图表）
3. colorInDiagram（图表的用户颜色部分）
4. 付款
5. 首页（返回首页）

现在，如果用户决定再次为图表着色，he/she 将从主页中选择该特定选项，流程将照常继续。 发生这种情况是因为付款后，用户将返回主页（已加载），并且每隔一个屏幕都会重置。随着应用程序的全面发展。 在 colorInDiagram 中调用了 ComponentWillUnmount。

我要处理的是：-

如果用户在第 3 步（为图表着色）时关闭应用程序，在重新打开应用程序时，我已将其编码为从应用程序停止的位置恢复。但是当用户完成填色和支付后，he/she并没有return到首页，应用直接从colorInDiagram组件启动。首次加载主页。

现在，当用户再次从主页为图表着色时，它会加载 colorInDiagram，因为它在用户继续付款之前被关闭了。 （它只是推送当前存在于堆栈中的组件）。 ComponentWillUnmount 未在 colorInDiagram 中调用。

预期行为：- 它应该是一个空白图表，没有填充任何颜色。就好像它是一个新的安装，而不是像原来那样重新渲染组件上次使用时关闭。

*可能的解决方案：-*我觉得我必须手动卸载 colorInDiagram 组件。

问题：-如何手动卸载一个react native组件。

此外，如果你们有任何其他见解或问题估计或解决方案，请分享！

Answer 1

我在评论部分建议的解决方案是为了能够被接受为这里的答案：

您可以使用 StackAction.reset method : https://reactnavigation.org/docs/en/stack-actions.html#reset 重置您的导航堆栈，您的屏幕渲染 colorInDiagram 不再位于堆栈中，从而卸载组件

来自文档：

The reset action wipes the whole navigation state and replaces it with the result of several actions.

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);