Question

我们正在研究React Native项目。在那里，我们在其中显示了标签栏，也在边栏中显示了标签栏。因此，对于该侧边栏，我们添加了react-navigation库。但是，在Android中，如果用户点击该设备的后退按钮，则如果抽屉已打开，我们必须将其关闭。

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

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

在切换到上一屏幕后，是否还有其他方法可以始终调用该方法？

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

我们知道我们可以调用render方法，但是，我们希望通过良好的实践来调用它。

还有什么方法可以使其成为全局方法，而不是编写称为类关闭抽屉。

代码：

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

}

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

有什么建议吗？

Answer 1

我建议使用react-navigation自己的Navigation Lifecycle侦听器，因此您还可以在不同页面上处理不同的后退按钮行为。

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也可能会有用

在React Native中哪里调用addListener

1 个答案: