Question

我正在尝试使用功能组件方法在React导航上实现一些侦听器：

const ExampleComponent = () => {

  const [subs, setSubs] = React.useState([]); 
  React.useEffect(() => {
    setSubs([
      navigation.addListener('willFocus', () => console.log('will focus')),
      navigation.addListener('willBlur', () => console.log('will blur')),
      navigation.addListener('didFocus', () => console.log('did focus')),
      navigation.addListener('didBlur', () => console.log('did blur')),
    ]);

    return () => {
      setSubs([]) 
    }
  }, [])

  return (
    ...
  )
};

遵循建议：https://fantashit.com/navigation-listeners-firing-multiple-times-per-event/

但是似乎正在发生的事是每个侦听器都被调用了两次，我不确定如何解决此问题？

Answer 1

docs说：

addListener返回一个可以调用以取消订阅事件的函数。

尝试在清理功能中清理每个订阅：

React.useEffect(() => {
  const unSubs = [
    navigation.addListener('willFocus', () => console.log('will focus')),
    navigation.addListener('willBlur', () => console.log('will blur')),
    navigation.addListener('didFocus', () => console.log('did focus')),
    navigation.addListener('didBlur', () => console.log('did blur')),
  ]

  return function cleanup() {
    unSubs.forEach((unSub) => {
      unSub()
    })
  }
}, [])

反应导航事件监听器被多次调用

1 个答案: