Question

我在React本机应用程序中使用其react导航添加了侦听器。我正在使用willFocus侦听器跟踪屏幕焦点。工作正常，但我无法删除此侦听器。 如何删除此监听器？。

某些屏幕基于选项卡，即使应用程序移动到不同的导航堆栈也不会卸载。由于componentWillUnmount没有调用，因此无法删除监听器

componentDidMount(){
  const {navigation} = this.props;
  navigation.addListener ('willFocus', () => {
    //code when screen focused
  })
}

componentWillUnmount(){
  //does not executing when move to stack navigator so unable to remove listner
}

const AppStack = createStackNavigator({
  TabNav: createBottomTabNavigator(
         Tab1: Tab1, 
         Tab2: Tab2,
         Tab3: Tab3
  ),
  screen1: screen1,
  screen2, screen2, 
  screen3: screen3
})

Answer 1

您可以使用NavigationEvents中的react-navigation组件。

在渲染方法中，您可以像这样使用此组件

import { NavigationEvents } from 'react-navigation';
...
...
render(){
 return(
 <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your other code
    */}
  </View>
 )
}
...

您可以使用此方法知道屏幕是否聚焦。

有关更多详细信息，请参见Docs

如何在响应导航中销毁所有订阅侦听器？

1 个答案: