Expo BarcodeScanner 仅在我第一次将扫描的条码数据发布到服务器时工作

Question

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() 代码并将扫描的代码记录在终端中，它正在扫描我按预期向相机显示的所有二维码。如何更改我的代码以防止这种情况发生？

Answer 1

当数据实际上通过 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);
      }
    })();
  };

文档页面上的Snack也有这种行为，并且页面本身突出显示了警告通知：

注意：将 undefined 传递给 onBarCodeScanned 属性将导致 no 扫描。这可以用来有效地“暂停”扫描仪，以便 即使在检索数据后，它也不会继续扫描。

Answer 2

设置：

import { BarCodeScanner } from 'expo-barcode-scanner';    
import {Alert } from 'react-native';
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);

功能：（答）按下警报后重新加载相机。 Alert 通常会结束任何其他函数，因此将其他函数连接到 Alert 调用。

 const handleBarCodeScanned = () => {
    setScanned(true);
    
Alert.alert('QR Code Scanned', 'Press OK to Scan Again', [
  { text: 'OK', onPress: () => setScanned(false) },
  ]);
}

JSX：

    <BarCodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      style={styles.camera}
    />