在导航器的每个屏幕上触发 BackHandler 的 HardwareBackPress 事件

Question

我在我的应用程序的“主”屏幕上使用 BackHandler 来提醒用户确认退出应用程序。我的根导航器上有 2 组屏幕身份验证和主页，isLogged bool 确定显示哪一组。

问题：应用程序的第一次渲染工作正常（无论是 Auth 还是 Home 屏幕集）但是当 isLogged 更改并且屏幕集更改时，BackHandler 开始在每个屏幕上触发更改设置的屏幕。这只有在重新启动应用程序后才能解决。工作示例 - https://snack.expo.dev/@msaxena92/11fd51

预期结果：在导航器内按返回键应该会带您到导航器的 initialRoute 或第一个屏幕，只有在那之后导航堆栈中没有更多屏幕时才会退出应用程序。

Answer 1

您有 2 个选择：

使用 useFocusEffect 挂钩而不是 useEffect，这将确保仅当您在此屏幕上时才运行效果：

useFocusEffect(
  React.useCallback(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to exit?", [
        { text: "Cancel" },
        { text: "Yes", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

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

或者，您也可以检查效果内的焦点：

React.useEffect(() => {
  const backAction = () => {
    if (!navigation.isFocused()) {
      return false;
    }

    Alert.alert("Hold on!", "Are you sure you want to exit?", [
      { text: "Cancel" },
      { text: "Yes", onPress: () => BackHandler.exitApp() }
    ]);
    return true;
  };

  const backHandler = BackHandler.addEventListener(
    "hardwareBackPress",
    backAction
  );

  return () => backHandler.remove();
}, [navigation]);

另见 https://reactnavigation.org/docs/custom-android-back-button-handling/

在导航器的每个屏幕上触发 BackHandler 的 HardwareBackPress 事件

BackHandler's HardwareBackPress event gets triggered on every screen of the navigator

react-native

react-navigation