在Reaction本机中调用addListener的位置

我们正在进行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也可以帮上忙

相关文章