Stacknavigatior 导航到已经在堆栈中的屏幕答案

【问题标题】：Stacknavigatior navigating to a screen, which is already in stackStacknavigatior 导航到已经在堆栈中的屏幕
【发布时间】：2019-10-12 13:45:05
【问题描述】：

我正在尝试显示一个带有新信息的屏幕，该信息已经在堆栈中。

画面顺序是这样的

个人资料 A -> 个人资料 A 的关注者列表（点击个人资料 B）-> 个人资料 B -> 个人资料 B 的关注者列表

个人资料和关注者列表都是屏幕文件。当我切换屏幕时，如果屏幕已经在堆栈中，它会转到上一个。例如，当我点击“个人资料 A 的关注者列表”中的“个人资料 B”时，它会返回并显示“个人资料 A”，因为个人资料屏幕已经在堆栈中。

如何生成可以添加到堆栈中的新屏幕？

【问题讨论】：

【解决方案1】：

尝试使用push 导航并添加额外的密钥。

例如：

this.props.navigation.push('ProfileB', {
    // others param, 
    key: maths.random().toString()
});

注意：这里不要使用followers的id，因为如果你点击同一个follower，那么它会匹配相同的想法，所以它可能会返回。这不好。所以使用任何随机密钥。

【讨论】：

【解决方案2】：

react-navigation-stack 在屏幕之间有 3 种导航方式：

navigate：标准导航，如果你正在导航到一个不在堆栈中的新屏幕，它会将它推入所谓的堆栈中。如果您导航到已安装的屏幕，它将弹回该屏幕。

replace：获取当前组件并将其替换为您要导航的组件

push：将一个新组件推入堆栈，创建它的一个新实例。

对堆栈进行成像：

screen 3
screen 2
screen 1

使用推送，您将能够启动屏幕 1 的另一个实例。

this.props.navigation.push("screen 1")

将堆栈保留为：

screen 1
screen 3
screen 2
screen 1

这种方法的问题在于，如果向后导航，您将被带到带有旧数据的屏幕的先前实例

【讨论】：