这是我的应用程序的简化流程:-
- login
- 主页(有彩色图表或创建图表的选项)
- colorInDiagram(用户为图表的各个部分着色)
- 付款
- 主页(返回主页)
现在,在此之后,如果用户决定再次为图表着色,他/她将从主页中选择该特定选项,并且流程将照常继续。
发生这种情况是因为付款后,用户将返回主页(已加载),并且所有其他屏幕将重置。随着应用程序回到原点。ComponentWillUnmount 在 colorInDiagram 中调用。
我正在尝试处理什么:-
如果用户在第 3 步(为图表着色)时关闭应用程序,则在重新打开应用程序时,我已对其进行编码以从应用程序停止的位置恢复。但当用户完成涂色和支付后,他/她并没有return作为应用程序进入主页直接从 colorInDiagram 组件开始。首次加载主页。
因此,现在当用户再次从主页为图表着色时,它会加载 colorInDiagram,因为它在用户继续付款之前被保留。 (它只是推送当前存在于堆栈中的组件)。ComponentWillUnmount 在 colorInDiagram 中未调用。
预期行为:-它应该是一个没有填充任何颜色的空白图。就好像它是一个全新的安装,而不仅仅是重新渲染上次使用时留下的组件。
*可能的解决方案:-*我觉得我必须手动卸载 colorInDiagram 组件。
问题:-如何手动卸载反应本机组件。
另外,如果你们有任何其他见解或问题估计的解决方案,请分享!
只是为了让它可以被接受作为答案,这是我在评论部分建议的解决方案:
您可以使用StackAction.reset https://reactnavigation.org/docs/en/stack-actions.html#reset方法 :https://reactnavigation.org/docs/en/stack-actions.html#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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)