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

41zrol4v  于 2024-01-04  发布在  Android
关注(0)|答案(1)|浏览(230)

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

  1. import React, { useState, useEffect } from 'react';
  2. import { View, StyleSheet, Button, Text, Alert } from 'react-native';
  3. import { Camera } from 'expo-camera';
  4. const styles = StyleSheet.create({
  5. container: {
  6. flex: 1,
  7. flexDirection: 'column',
  8. justifyContent: 'flex-end',
  9. },
  10. preview: {
  11. flex: 1,
  12. justifyContent: 'center',
  13. alignItems: 'center',
  14. },
  15. scanText: {
  16. fontSize: 20,
  17. textAlign: 'center',
  18. margin: 10,
  19. },
  20. qrFrame: {
  21. width: 150, // Riduci ulteriormente le dimensioni del riquadro
  22. height: 150,
  23. borderRadius: 10,
  24. borderColor: '#FFF',
  25. borderWidth: 2,
  26. position: 'absolute',
  27. justifyContent: 'center',
  28. alignItems: 'center',
  29. },
  30. qrCodeText: {
  31. fontSize: 16, // Riduci la dimensione del testo
  32. textAlign: 'center',
  33. color: '#FFF',
  34. },
  35. });
  36. export default function App() {
  37. const [hasCameraPermission, setHasCameraPermission] = useState(null);
  38. const [scanned, setScanned] = useState(false);
  39. const [scannedData, setScannedData] = useState('');
  40. const [serverResponse, setServerResponse] = useState('');
  41. useEffect(() => {
  42. (async () => {
  43. const { status } = await Camera.requestCameraPermissionsAsync();
  44. setHasCameraPermission(status === 'granted');
  45. })();
  46. }, []);
  47. <!-- begin snippet: js hide: false console: true babel: false -->

字符串

  1. const handleBarCodeScanned = async ({ data }) => {
  2. setScanned(true);
  3. setScannedData(`Dati: ${data}`);
  4. // Send data to PHP server
  5. try {
  6. const response = await fetch('https://www.chesifastasera.com/handleQR.php', {
  7. method: 'POST',
  8. headers: {
  9. Accept: 'application/json',
  10. 'Content-Type': 'application/json',
  11. },
  12. body: JSON.stringify({ qrData: data }), // Send data as JSON
  13. });
  14. if (!response.ok) {
  15. throw new Error(`HTTP Error! Code: ${response.status}`);
  16. }
  17. const responseData = await response.text();
  18. setServerResponse(responseData); // Set server response in state
  19. // Display the response in an alert or other way
  20. Alert.alert('Server Response', responseData);
  21. // Other actions based on server response here
  22. } catch (error) {
  23. console.error('Error during server request:', error.message);
  24. // Error handling if needed
  25. }
  26. };
  27. const resetScanner = () => {
  28. setScanned(false);
  29. setScannedData('');
  30. setServerResponse('');
  31. };
  32. if (hasCameraPermission === null) {
  33. return <View />;
  34. }
  35. if (hasCameraPermission === false) {
  36. return <Text>Camera permission denied</Text>;
  37. }
  38. return (
  39. <View style={styles.container}>
  40. <Camera
  41. onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
  42. style={styles.preview}
  43. >
  44. {/* Frame the QR code here */}
  45. <View style={styles.qrFrame}>
  46. <Text style={styles.qrCodeText}>{scannedData}</Text>
  47. </View>
  48. </Camera>
  49. {scanned && (
  50. <View>
  51. <Text style={styles.scanText}>{`Risposta del server: ${serverResponse}`}</Text>
  52. <Button title="Scansiona di nuovo" onPress={resetScanner} />
  53. </View>
  54. )}
  55. </View>
  56. );
  57. }

njthzxwz

njthzxwz1#

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

  1. <Camera
  2. onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
  3. style={styles.preview}
  4. barCodeScannerSettings={{
  5. barCodeTypes: [Camera.Constants.BarCodeType.qr],
  6. }}
  7. >
  8. {/* Frame the QR code here */}
  9. <View style={styles.qrFrame}>
  10. <Text style={styles.qrCodeText}>{scannedData}</Text>
  11. </View>
  12. </Camera>

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

展开查看全部

相关问题