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

Question

我正在开发一个问答游戏，我正在使用 react-navigation 来处理导航，我有 3 个组件，(newGame、Questions、Results)我不希望用户返回到结果页面的问题，如果没有。问题已经用完，但是，按下后退按钮(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 页面中触发导航/返回。这再次将其带回结果页面。

可能的修复方法？

我想在进入 NewGame 组件页面后停止触发后退按钮。有办法吗？

我的环境

react 导航 = ^1.0.0-beta.11 react native = 0.44.0

Answer 1

您需要返回 true 以指示您自己处理了后退按钮，如您在 docs 中所见.

if one subscription returns true then subscriptions registered earlier will not be called

您的代码应如下所示:

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;
    });
}