ExpoBarcodeScanner僅在我將掃描的條形碼上的資料發布到服務器時第一次作業

Expo BarcodeScanner 僅在我將掃描的條形碼上的資料發布到服務器時第一次作業

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, Button } from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";
import { useSnapshot } from "valtio";
import phoneState from "../store/phoneState";
import { setqrText, setqrTextFlag } from "../store/phoneState";

export default function ScannerScreen({ navigation }) {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [text, setText] = useState("Not yet scanned");
  const { qrText, qrTextFlag } = useSnapshot(phoneState);

  useEffect(() => {
    console.log("qrTexT: ", qrText);
  }, [qrText]);

  const askForCameraPermission = () => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  };

  // Request Camera Permission
  useEffect(() => {
    askForCameraPermission();
  }, []);

  // What happens when we scan the bar code
  const handleBarCodeScanned = ({ type, data }) => {
    axios
      .post(`http://${localIP}:5000/api/qr/scanQr`, { data })
      .then((response) => {
        const { message } = response.data;
      })
      .catch((e) => {
        alert("ERR : ", e);
      });
  };

  // Check permissions and return the screens
  if (hasPermission === null) {
    return (
      <View style={styles.container}>
        <Text>Requesting for camera permission</Text>
      </View>
    );
  }
  if (hasPermission === false) {
    return (
      <View style={styles.container}>
        <Text style={{ margin: 10 }}>No access to camera</Text>
        <Button
          title={"Allow Camera"}
          onPress={() => askForCameraPermission()}
        />
      </View>
    );
  }

  // Return the View
  return (
    <View style={styles.container}>
      <View style={styles.barcodebox}>
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
          style={{ height: 400, width: 400 }}
        />
      </View>
      <Text style={styles.maintext}>{text}</Text>

      {scanned && (
        <Button
          title={"Go Back"}
          onPress={() => {
            setScanned(false);
            navigation.navigate("Home");
          }}
          color='tomato'
        />
      )}
    </View>
  );
}

正如您在此處看到的，我想將掃描的資料發送到我的服務器，以便在掃描條形碼后使用 axios.post() 執行此操作。第一次嘗試它作業得很好，但后來它不掃描二維碼。我試圖洗掉我的 axios.post() 代碼并將掃描的代碼記錄在終端中，它正在掃描我按預期顯示相機的所有二維碼。如何更改我的代碼以防止這種情況發生？

uj5u.com熱心網友回復：

在資料實際上通過 POST 同步發送到您的服務器時切換某種等待時間以停止掃描然后立即重新激活它怎么樣？

我沒有機會在實際設備上對其進行測驗并將其復制到精確的位置，但我希望您能了解它的要點：

  // What happens when we scan the bar code
  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    (async () => {
      try {
        const response = await axios.post(`http://${localIP}:5000/api/qr/scanQr`, { data })
        const { message } = response.data;
        // automatically restoring scanned to keep the ball rolling on the onBarCodeScanned callback
        setScanned(false);
      } catch (e) {
        alert("ERR : ", e);
      }
    })();
  };

doc 頁面上的Snack也有這樣的行為，并且在頁面本身上突出顯示了警告通知：

注意：將 undefined 傳遞給 onBarCodeScanned 屬性將導致不掃描。這可以用來有效地“暫停”掃描儀，這樣即使在檢索到資料后它也不會繼續掃描。

標籤：

上一篇：TabBarReactNative中的導航

下一篇：如何抑制博覽會中的特定警告