android 无法读取我智能手机上的QR码,我该怎么办?

41zrol4v  于 12个月前  发布在  Android
关注(0)|答案(1)|浏览(190)

我的QR码有问题,我正在尝试扫描QR码,我正在使用Expo Camera,但我遇到了一个奇怪的问题。
如果QR码在PC上,我总是可以读取QR码,但在智能手机/iPhone上,它无法读取QR码。我也尝试添加一个框,但它似乎不起作用。你能给予我一个帮助吗?请我能做什么?

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Button, Text, Alert } from 'react-native';
import { Camera } from 'expo-camera';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
  },
  preview: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  scanText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  qrFrame: {
    width: 150,  // Riduci ulteriormente le dimensioni del riquadro
    height: 150,
    borderRadius: 10,
    borderColor: '#FFF',
    borderWidth: 2,
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },
  qrCodeText: {
    fontSize: 16,  // Riduci la dimensione del testo
    textAlign: 'center',
    color: '#FFF',
  },
});

export default function App() {
  const [hasCameraPermission, setHasCameraPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [scannedData, setScannedData] = useState('');
  const [serverResponse, setServerResponse] = useState('');

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasCameraPermission(status === 'granted');
    })();
  }, []);

<!-- begin snippet: js hide: false console: true babel: false -->

字符串

const handleBarCodeScanned = async ({ data }) => {
    setScanned(true);
    setScannedData(`Dati: ${data}`);

    // Send data to PHP server
    try {
      const response = await fetch('https://www.chesifastasera.com/handleQR.php', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ qrData: data }), // Send data as JSON
      });

      if (!response.ok) {
        throw new Error(`HTTP Error! Code: ${response.status}`);
      }

      const responseData = await response.text();
      setServerResponse(responseData); // Set server response in state

      // Display the response in an alert or other way
      Alert.alert('Server Response', responseData);

      // Other actions based on server response here

    } catch (error) {
      console.error('Error during server request:', error.message);
      // Error handling if needed
    }
  };

  const resetScanner = () => {
    setScanned(false);
    setScannedData('');
    setServerResponse('');
  };

  if (hasCameraPermission === null) {
    return <View />;
  }
  if (hasCameraPermission === false) {
    return <Text>Camera permission denied</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={styles.preview}
      >
        {/* Frame the QR code here */}
        <View style={styles.qrFrame}>
          <Text style={styles.qrCodeText}>{scannedData}</Text>
        </View>
      </Camera>
      {scanned && (
        <View>
          <Text style={styles.scanText}>{`Risposta del server: ${serverResponse}`}</Text>
          <Button title="Scansiona di nuovo" onPress={resetScanner} />
        </View>
      )}
    </View>
  );
}

njthzxwz

njthzxwz1#

使用barCodeTypes更改barCodeScannerSettings建议使用[Camera.Constants.BarCodeType.qr]指示相机应扫描的条形码类型。由于您对扫描QR码特别感兴趣,因此将您可能扫描的条形码类型限制为QR码是合理的,以便潜在地提高扫描可靠性。
要提高扫描组件的可靠性,请调整barCodeScannerSettings。您可以尝试更改barCodeScannerSettings={{ barCodeTypes:[Camera.Constants.BarCodeType.qr] }}。

<Camera
  onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
  style={styles.preview}
  barCodeScannerSettings={{
    barCodeTypes: [Camera.Constants.BarCodeType.qr],
  }}
>
  {/* Frame the QR code here */}
  <View style={styles.qrFrame}>
    <Text style={styles.qrCodeText}>{scannedData}</Text>
  </View>
</Camera>

字符串
barCodeTypes:此代码片段中的[Camera.Constants.BarCodeType.qr]表示摄像头应该只能识别QR码。这可以减少摄像头的处理负载,同时提高QR码识别的精度和速度。

相关问题