如何在堆栈导航器（react-navigation 2.X）中卸载先前安装的组件？

Posted 2023-02-16

【中文标题】如何在堆栈导航器（react-navigation 2.X）中卸载先前安装的组件？

【英文标题】：How to unmount a previously mounted component in stack navigator (react-navigation 2.X)?

【发布时间】：2019-06-30 23:00:26

【问题描述】：

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

登录 主页（可选择为图表着色或创建图表） colorInDiagram（用户为图表的各个部分着色） 付款 首页（返回首页）

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

我要处理的事情：-

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

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

预期行为：- 它应该是一个没有填充颜色的空白图表。就好像它是一个新的安装，而不仅仅是重新渲染组件，因为它在上次使用时被遗漏了.

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

问题：-如何手动卸载 react 原生组件。

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

【问题讨论】：

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

StackAction.reset 有效！你想把它变成答案而不是评论，以便我可以证明它是正确的解决方案吗？

【参考方案1】：

我在评论部分建议的解决方案是为了让它可以被接受为答案：

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

来自文档：

重置操作会擦除整个导航状态并将其替换为多个操作的结果。

import  StackActions, NavigationActions  from 'react-navigation';

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

【讨论】：

TS2724: 模块 '"../../../node_modules/@react-navigation/native/lib/typescript/src"' 没有导出的成员 'NavigationActions'。你是说'NavigationAction'

您好，提供的答案是针对最高 2.X 的 react-navigation 版本 React-navigation 现在是 5.X 版本，您可能想看看这个：reactnavigation.org/docs/stack-actions/#replace if您正在使用基于堆栈的导航器。如果您仍然遇到问题，我邀请您提出另一个问题，我很乐意与其他更有才华的开发人员一起看看

很公平。不用担心，我只是想了解一个 android webview 崩溃如何最终出现在我的导航堆栈中 N-5 的屏幕上，而我的代码中只有一个导航到它。我刚刚尝试了 v5 操作，但没有帮助。