Question

我在两条路线之间导航时遇到问题。我的方案如下：

我有2条路线：Route1和Route2 - 两者都是兄弟姐妹。

假设我在Route1，我可以从中导航到Route2并传递参数（总是）。我在以下列方式快速导航时调查了错误行为：

Route1 -> Route2 (param: 1) -> Route 1 -> Route 2 (param: 2)

我已在Route2 componentDidMount中放置了控制台日志，以查看以下内容的输出：

const { navigation } = this.props;
console.log(navigation.state.params.param);

令我惊讶的是，如果我快速导航，上面场景的输出将是：

1 
1 
2

预期的行为是：

1
2

有什么想法吗？

Answer 1

当您从Route2导航到Route1时，它是从右侧还是左侧进入？它可能会被安装两次，因为反应导航很有趣：P

您可能也按下按钮太快了。在这种情况下，请在第一次单击后禁用该按钮几百毫秒。

class Button extends React.Component {
  onPress = () => {
    if (this.props.disabled) return;
    if (this.canPress) {
      this.canPress = false;
      this.props.onPress();
      setTimeout(() => { this.canPress = true; }, this.props.pressTimeout || 500);
    }
  }
....

Answer 2

如果你正在使用堆栈导航器，那么每个导航的反应导航都会做什么。导航它会推动堆栈中的路径，所以在你的情况下堆栈将以这种方式填充

STACK [Route1]
STACK [Route2，Route1]。 //一旦打印1
STACK [Route1，Route2，Route1]
STACK [Route2，Route1，Route2，Route1] //这里为每个推送路线调用一次componentDidMount，为堆叠中的两条路线打印1和2

因此堆栈中将有两个具有不同参数的Route2。

这就是反应导航的方式。

因此，您可以根据需要使用以下选项，而不是每次都使用导航：

pop - 回到堆栈
popToTop - 转到堆栈顶部
替换 - 用新的路线替换当前路线

ComponentDidMount触发两次

2 个答案: