时间戳

首页 > 解决方案 > 在冲突堆栈和抽屉导航期间未卸载组件 - React Native

react-native - 在冲突堆栈和抽屉导航期间未卸载组件 - React Native

问题描述

对不起，这会很长。

我的应用程序在登录后是如此结构化。

 - Drawer -->
 -     Dashboard Stack
 -     Project Stack -->
 -         ProjectsList
 -         TablesList
 -         RecordsList
 -     About Stack

项目栈如下 --> - ProjectsList - TablesList（每个项目都有一些表） - RecordsList（每个表都有一些记录）

这些项目的列表及其表以及它们的记录是高度动态的，并通过 API 获取。

我的抽屉组件的实现是由一个自定义组件完成的，它由以下元素组成。

抽屉组件

按下这些 TouchableOpacity 时我的重定向功能的实现是 -->

const navigateAction = NavigationActions.navigate({
    routeName: route,
});
this.props.navigation.dispatch(navigateAction);

因此，可以通过 --> 转到 RecordsList

  1. 单击工作区列表->在那里选择一个项目->从项目中选择一个表；
  2. 或者通过单击一个项目 --> 从项目中选择一个表；

现在，仪表板还包含小部件。（点击哪个，我们可以直接进入recordsList。每当我直接进入recordsList时，它就可以工作。但是当我通过Drawer进入另一个项目时，我的recordsList没有卸载。

因此，当我收到不同的道具（针对不同的表）时，我的业务逻辑将失败，因为没有调用 componentDidMount 和其他生命周期函数。

因此，我的问题是，当我从堆栈 A 的屏幕（X）切换到堆栈 B 的屏幕（Y），然后再切换到堆栈 B 的不同屏幕（Z）时。（屏幕 Y 不会卸载）。

还附上一些截图。

仪表板屏幕

表列表

记录列表

标签： react-nativereact-navigationreact-navigation-stackreact-navigation-drawer

解决方案

推荐阅读