0

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

因此，我们将 addListener 添加到componentDidMount()并删除它componentWillUnmount()。

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

一旦我们切换到上一个屏幕，是否有任何替代方法将始终调用。

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

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

有没有办法让它成为全局方式而不是编写调用关闭抽屉的类。

代码：

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

}

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

有什么建议么？

4

1 回答 1

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 组件也可能会有所帮助

于 2019-04-09T10:12:03.650 回答