react-native：后退按钮处理程序

Question

我想检测按下硬件后退按钮时值发生了变化。

但是，在 useEffect 中使用 BackHandler，它不起作用。

这是我的代码...

 useEffect(() => { BackHandler.addEventListener("hardwareBackPress", backAction); return () => { BackHandler.removeEventListener("hardwareBackPress", backAction) } },[]); const backAction = () => { BackActionAlert( navigation, addedImage.length > 0 || deletedImage.length > 0, 'ModifyDetail' ); return true; }; const BackActionAlert = (navigation, requireBackAlert, fromWhere) => { if (requireBackAlert) { Alert.alert( "warning", alertMessage(fromWhere), [ { text: 'NO', style: 'cancel', }, { text: 'OK', onPress: () => navigation.goBack() } ], { cancelable: true, } ); } else { navigation.goBack(); } };

在我的代码中，当该组件安装时，数组 addedImage 和 deletedImage 没有元素，

所以，它返回假（我猜）

我该如何解决？

Answer 1

在App.js所在的位置创建一个名为hooks的文件夹

在hooks文件夹中，创建一个名为useBackHandler.js的文件

在useBackHandler.js里面粘贴这个

import { useEffect } from "react";
import { BackHandler } from "react-native";

export function useBackHandler(handler) {
  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", handler);

    return () => BackHandler.removeEventListener("hardwareBackPress", handler);
  }, [handler]);
}

然后像这样在任何你想处理后推的地方使用它

import useBackHandler from "../hooks/useBackHandler";
// Make sure the import is correct


useBackHandler(() => {
  if (want_to_do_something) {
    // Do Something
    return true;
  }
  return false;
});

所以在你的情况下，它将像这样使用

useBackHandler(() => {
  if (addedImage.length > 0 || deletedImage.length > 0) {
    BackActionAlert(navigation, 'ModifyDetail');
    return true;
  }
  return false;
});

const BackActionAlert = (navigation, fromWhere) => {
  Alert.alert(
    'warning',
    alertMessage(fromWhere),
    [
      {
        text: 'NO',
        style: 'cancel',
      },
      {
        text: 'OK',
        onPress: () => navigation.goBack(),
      },
    ],
    {
      cancelable: true,
    }
  );
};