在Reaction本机中调用addListener的位置 [英] Where to call addListener in react native

问题描述

我们正在进行Reaction Native项目。在这一点上，我们在其中显示了选项卡栏，同时也显示了侧边栏。 因此，对于侧栏，我们添加了反应导航库。但是，在Android系统中，如果用户点击设备的后退按钮，如果抽屉是打开的，我们就必须将其关闭。

因此，我们正在componentDidMount()中添加addListener，并在componentWillUnmount()中删除它。

但是，问题是，如果我切换到另一个选项卡并返回到上一个选项卡，并且如果我们点击设备后退按钮，则会删除由于侦听器而未呼叫的后退按钮处理程序。

是否有其他方法，一旦我们切换到上一个屏幕，将始终调用哪个方法。

我们知道，ComponentDidmount在该屏幕启动时只会调用一次。

我们知道可以调用Render方法，但我们希望以良好的做法调用它。

有没有什么方法可以使它成为全局的，而不是编写调用 类关闭抽屉。

编码：

componentDidMount() {
    BackHandler.addEventListener('backTapped', this.backButtonTap);
}
  componentWillUnmount() {
    BackHandler.removeEventListener('backTapped', this.backButtonTap);

}

 backButtonTap = () => {
   navigation.dispatch(DrawerActions.closeDrawer());
}

有什么建议吗？

推荐答案

我建议使用反应导航自己的导航生命周期侦听器，这样您还可以在不同的页面上处理不同的后退按钮行为。

componentDidMount() {
    this.willFocusListener = navigation.addListener('willFocus', () => {
      BackHandler.addEventListener('backTapped', this.backButtonTap);
    });
    this.willBlurListener = navigation.addListener('willBlur', () => {
      BackHandler.removeEventListener('backTapped', this.backButtonTap);
    });
}

componentWillUnmount() {
    this.willFocusListener.remove();
    this.willBlurListener.remove();
}

那么NavigationEvents component也可以帮上忙

这篇关于在Reaction本机中调用addListener的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！