如何在堆栈导航器(react-navigation 2.X)中卸载以前安装的组件? [英] How to unmount a previously mounted component in stack navigator (react-navigation 2.X)?

问题描述

1. 登录
2. 主页(可以选择着色图表或创建图表)
3. colorInDiagram(用户为图表的部分着色)
4. makePayment
5. 主页(返回主页)

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

Now, after this if user decides to color a diagram again, he/she will choose that particular option from the homepage and the flow will continue as usual. This happens because after payment, the user will go back to the homepage(which is already loaded), and every other screen will reset. As the app is coming in full circle. ComponentWillUnmount is called in colorInDiagram.

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

If the user closes the app while on step 3 (coloring the diagram), on reopening the app, I have coded it to recover from where the app was left off. But when the user finishes coloring and payment, he/she does not return to the homepage as the app directly started from the colorInDiagram component. The homepage loads for the first time.

因此，现在当用户再次从主页绑定到为图表着色时，它会加载 colorInDiagram，因为它在用户继续付款之前已停止.(它只是推送当前存在于堆栈中的组件).ComponentWillUnmount 未在 colorInDiagram 中调用.

So now when the user ties to color a diagram again from the homepage, it loads up the colorInDiagram as it was left off before the user proceeded to make payment. (It just pushes the component as it exists in the stack currently). ComponentWillUnmount is NOT called in colorInDiagram.

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

Expected behavior:- It should be a blank diagram with no colors filled in. As if it was a fresh mount and not just re-rendering of the component as it was left off when last used.

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

*Possible solution:-*I feel like I will have to manually unmount the colorInDiagram component.

问题:-如何手动卸载 React Native 组件.

The question:- How do I do manually unmount a react native component.

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

Also, if you guys have any other insights or problem estimates or solutions, please do share!

推荐答案

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

Just so that it can be accepted as an answer here is the solution I suggested in the comment section :

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

You can use the StackAction.reset method : https://reactnavigation.org/docs/en/stack-actions.html#reset to reset your navigation stack where your screen rendering colorInDiagram is not in the stack anymore thus unmounting the component

来自文档:

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

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);

这篇关于如何在堆栈导航器(react-navigation 2.X)中卸载以前安装的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！