react-native - 如何在 react native 中删除 react 导航的事件监听器？

Question

我想检测 React Native 中导航的焦点变化。我正在使用类组件，但现在 RN 社区充斥着功能组件。

这是来自@react-naviagtion 的片段

function Profile({ navigation }) {
    React.useEffect(() => {
      const unsubscribe = navigation.addListener('focus', () => {
        // Screen was focused
        // Do something
      });
  
      return unsubscribe;
    }, [navigation]);
  
    return (
        <>
            <Text>tedtx</Text>
        </>
    );
  }

我在类组件中使用过，它运行良好，没有内存泄漏警告，但我不知道这是否是一种方法。

    componentDidMount(){
        
        this.state.focusListener = this.props.nav.navigation.addListener('focus',()=>{
            log('route ',this.props)
        })
         // should I return here
    }
   componentWillUnmount(){
       // or should i something here?
       // this.props.nav.navigation.removeListener(this.state.focusEvent)
      //above does not give error but not removing listener
   }

我注意到重新加载地铁会移除听众。当我保存文件(热重载)并尝试调用焦点上的监听器时，它实际上会增加。每次我热重载时它都会增加一个。听众似乎没有被删除。

Answer 1

you can try this

class Profile extends React.Component {
  componentDidMount() {
    this._unsubscribe = navigation.addListener('focus', () => {
      // do something
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  render() {
    // Content of the component
  }
}

react 导航事件:https://reactnavigation.org/docs/navigation-events/