时间戳

首页 > 解决方案 > 导航到同一屏幕时不会触发 React Navigation v4 生命周期事件

react-native - 导航到同一屏幕时不会触发 React Navigation v4 生命周期事件

问题描述

假设我有一个ProductScreen组件，它呈现有关产品的信息以及其他类似产品的列表。单击类似产品时，导航是从ProductScreen==>ProductScreen使用不同的参数/键完成的。

我面临的问题是我想对 React Navigation 焦点事件做一些事情（例如，滚动到顶部）

navigation.addListener('didFocus', () => {
  console.log('didFocus')
  scrollToTop()
})

我在组件第一次呈现时看到了日志，但是从ProductScreen==>进行导航时ProductScreen，didFocus事件似乎没有再次触发，因此组件没有滚动到顶部。事实上，似乎没有一个生命周期事件（ willFocus, didFocus, willBlur, ）被触发。didBlur

从组件 X 导航到具有不同参数的组件 X 时，有什么方法可以使用反应导航生命周期事件？谢谢！

标签： react-nativereact-navigationreact-navigation-stack

解决方案

您正在导航到同一屏幕，因此didFocus不会触发是正常的，因为屏幕已经聚焦。

如果您想对参数更改做出反应，您可以使用componentDidUpdate/useEffect将以前的参数与新参数进行比较，然后做您需要做的事情。

如果要导航到新屏幕，可以使用push代替navigate

推荐阅读