React Native:为什么我无法重新添加事件侦听器?

Question

在我的 React Native 应用程序中，我有两个屏幕screenA和screenB。我正在使用react-navigation@4.x，我用this.props.navigation.navigate('screenB')从screenA导航到screenB，然后用this.props.navigation.goBack()导航回来。

我正在使用OneSignal，当screenA挂载时，我会添加一个OneSignal事件侦听器。

屏幕A

OneSignal.addEventListener('opened', () => console.log(this.props.navigation.state.routeName));

我在screenB中具有相同的代码，到目前为止，它按预期工作。当我在screenA并打开推送通知，它会记录screenA，当我screenB时它会记录screenB，因为screenB的事件侦听器会覆盖screenA。

但是，当我导航回screenA时，screenB的事件侦听器仍然存在，因此我将以下代码添加到screenB以删除其事件侦听器：

屏幕B

componentWillUnmount() {
OneSignal.removeEventListener('opened');
}

为了让screenA重新调用其事件侦听器，我添加了以下代码：

屏幕A

componentDidUpdate(prevProps) {
if (!prevProps.isFocused && this.props.isFocused) {
OneSignal.addEventListener('opened', () => console.log(this.props.navigation.state.routeName));
}
}

**问题： **

当我返回到screenA时会触发此isFocused条件，因此到达addEventListener代码块，但未成功添加事件侦听器。

有谁知道我该如何对此进行故障排除？

Answer 1

看这里

若要删除事件处理程序，使用 addEventListener(( 方法指定的函数必须是外部函数，如上例 (myFunction( 所示。 匿名函数，如"element.removeEventListener("event"， function(({ myScript }(;"将不起作用

因此，创建一个函数并提供 SAME 引用来添加/删除事件侦听器。

喜欢这个

componentDidMount() {
window.addEventListener('opened', this.eventListenerFun);
}
componentWillUnmount() {
window.removeEventListener('opened', this.eventListenerFun);
}
eventListenerFun = () => { 
// code of your fun goes here....
//console.log(this.props.navigation.state.routeName);
}

另请参阅此处

Answer 2

根据 React Navigation 的文档： 考虑一个带有屏幕 A 和 B 的堆栈导航器。导航到 A 后，调用其组件 DidMount。当推送 B 时，也会调用其组件 DidMount，但 A 仍挂载在堆栈上，因此不会调用其组件 WillUnmount。

当从 B 返回到 A 时，调用 B 的 componentWillUnmount，但 A 的 componentDidMount 不是因为 A 一直保持挂载状态。

阅读更多...