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