如何在具有选项卡导航器 React Native 的屏幕中处理后退按钮

Question

所以我有一个应用程序的通用抽屉菜单，并且在其中一个屏幕中有一个选项卡导航器。我正在尝试处理后退按钮，因为它会引发没有屏幕可返回的错误。我在 React Navigation 的文档中看到您将 useFocusEffect 与 React.useCallback 一起使用，但是当我尝试它时，它给了我一个 undefined is not a function (near 0, _react,useFocusEffect) 错误。

这是我使用的代码：

export default function BudgetScreen({ navigation }) {

  useFocusEffect(
    React.useCallback(() => {
      const handleBackButton = () => {
        navigation.goBack()
        return true;
      }

      BackHandler.addEventListener('hardwareBackPress', handleBackButton);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
    }, [])
  );

Answer 1

你需要像这样导入useFocusEffect：

import { useFocusEffect } from '@react-navigation/native';