跳到主要内容
版本: 7.x

自定义 Android 返回按钮行为

默认情况下，当用户按下 Android 硬件返回按钮时，如果 react-navigation 可以弹出一个屏幕，则会弹出一个屏幕，如果没有屏幕可以弹出，则会退出应用。这是一个合理的默认行为，但在某些情况下，您可能希望实现自定义处理。

例如，考虑一个用户在列表中选择项目的屏幕，并且“选择模式”处于活动状态。在按下返回按钮时，您首先希望停用“选择模式”，并且只有在第二次按下返回按钮时才应弹出屏幕。以下代码片段演示了这种情况。我们使用了 react-native 自带的 BackHandler，以及 useFocusEffect hook 来添加我们的自定义 hardwareBackPress 监听器。

从 onBackPress 返回 true 表示我们已经处理了该事件，并且 react-navigation 的监听器将不会被调用，因此不会弹出屏幕。返回 false 将导致事件冒泡，并且 react-navigation 的监听器将弹出屏幕。

function ScreenWithCustomBackBehavior() {
  // ...

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        if (isSelectionModeEnabled) {
          setIsSelectionModeEnabled(false);
          return true;
        } else {
          return false;
        }
      };

      const subscription = BackHandler.addEventListener(
        'hardwareBackPress',
        onBackPress
      );

      return () => subscription.remove();
    }, [isSelectionModeEnabled])
  );

  // ...
}
在 Snack 上尝试

所提出的方法对于在 StackNavigator 中显示的屏幕效果很好。目前可能不支持其他情况下的自定义返回按钮处理（例如，一个已知的情况是，当您想在打开的抽屉中处理返回按钮按下时，这不起作用。欢迎针对此类用例的 PR！）。

如果不是覆盖系统返回按钮，而是想阻止从屏幕返回，请参阅关于阻止返回的文档。

为什么不使用组件生命周期方法​

起初，您可能会倾向于使用 componentDidMount 来订阅返回按钮按下事件，并使用 componentWillUnmount 来取消订阅，或者使用 useEffect 来添加监听器。这种方法行不通 - 在导航生命周期中了解更多关于此内容的信息。