React Native：为什么我无法重新添加事件监听器？答案

【问题标题】：React Native: Why am I not able to re-add an event listener?React Native：为什么我无法重新添加事件监听器？
【发布时间】：2020-10-26 03:39:23
【问题描述】：

在我的 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));
  }
}

**问题：**

这个isFocused条件是在我返回screenA时触发的，所以到达addEventListener代码块，但是事件监听器没有成功添加。

有谁知道我该如何解决这个问题？

【问题讨论】：

标签： reactjs react-native addeventlistener onesignal react-native-onesignal

【解决方案1】：

根据 React Navigation 的文档：考虑一个带有屏幕 A 和 B 的堆栈导航器。导航到 A 后，它的 componentDidMount 被调用。在压入 B 时，它的 componentDidMount 也会被调用，但 A 仍然挂载在堆栈上，因此不会调用它的 componentWillUnmount。

从B回到A时，调用了B的componentWillUnmount，但是A的componentDidMount却没有，因为A一直挂着。

【讨论】：

【解决方案2】：

见here

要删除事件处理程序，使用 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);
}

还有see here

【讨论】：