如何阻止Android硬件后退按钮在react-native的react-navigation中运行？

Question

我正在开发一个琐事游戏,我正在使用反应导航来处理导航,我有3个组件,(新游戏,问题,结果)我不希望用户回到结果页面的问题,如果没有.问题已经用尽,然而,按下后退按钮(Android硬件)正在将他带回问题.然后,我尝试处理硬件后退按钮,如下所示:

componentWillMount() {
      this.props.gameState(true);
      BackHandler.addEventListener('hardwareBackPress', () => {
        if (this.props.gamePlaying) { // Currently set to true. I will set it to false again on NewGame Page.
          this.props.navigation.navigate('NewGame');
        }
      });
    }

但是,这会将用户带到NewGame屏幕,但是立即回弹到结果页面,因为它在NewGame页面中立即触发NAVIGATION/BACK.这又将其带回结果页面.

可能的修复？

我想在登陆NewGame组件页面后停止后退按钮.有办法吗？

我的环境

react-navigation = ^ 1.0.0-beta.11 react-native = 0.44.0

Answer 1

您需要返回true以表明您已经自己处理了后退按钮,正如您在文档中看到的那样.

如果一个订阅返回true,则不会调用先前注册的订阅

您的代码应如下所示:

componentWillMount() {
    this.props.gameState(true);
    BackHandler.addEventListener('hardwareBackPress', () => {
        if (this.props.gamePlaying) {
            this.props.navigation.navigate('NewGame');
            return true; // This will prevent the regular handling of the back button
        }

        return false;
    });
}