reactjs - 如何在堆栈导航器(react-navigation 2.X)中卸载以前安装的组件？

Question

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

1. 登录
2. 主页(有彩色图表或创建图表的选项)
3. colorInDiagram(用户为图表的各个部分着色)
4. 付款
5. 首页(返回首页)

现在，在此之后，如果用户决定再次为图表着色，他/她将从主页中选择该特定选项，并且流程将照常继续。发生这种情况是因为付款后，用户将返回主页(已加载)，并且所有其他屏幕都会重置。随着应用程序回到原点。 ComponentWillUnmount 在 colorInDiagram 中调用。

我想要处理的事情:-

如果用户在第 3 步(为图表着色)时关闭应用程序，则在重新打开应用程序时，我已对其进行编码以从应用程序停止的位置恢复。但当用户完成着色和付款后，他/她不会返回主页，因为应用直接从colorInDiagram组件启动。首次加载主页。

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

预期行为:-它应该是一个没有填充任何颜色的空白图表。就好像它是一个全新的安装，而不仅仅是重新渲染上次使用时留下的组件。

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

问题:-我如何手动卸载 react native 组件。

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

Answer 1

只是为了让它被接受作为答案，这是我在评论部分建议的解决方案:

您可以使用StackAction.reset方法: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);