0

在我的 React Native 应用程序中，我有两个屏幕screenA和screenB. 我正在使用react-navigation@4.x，并且使用.screenAscreenBthis.props.navigation.navigate('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's 事件侦听器会覆盖screenA's.

但是，当我导航回 时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，所以到达了代码块，但是没有成功添加事件监听器。screenAaddEventListener

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

4

2 回答 2

0

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

从 B 回到 A 时，调用了 B 的 componentWillUnmount，但 A 的 componentDidMount 没有被调用，因为 A 一直处于挂载状态。

阅读更多...

于 2020-07-06T04:32:57.813 回答
0

看这里

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

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

像这样

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);
}

也见这里

于 2020-07-06T04:29:56.353 回答