我的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>
);
}
型
1条答案
按热度按时间njthzxwz1#
使用barCodeTypes更改barCodeScannerSettings建议使用[Camera.Constants.BarCodeType.qr]指示相机应扫描的条形码类型。由于您对扫描QR码特别感兴趣,因此将您可能扫描的条形码类型限制为QR码是合理的,以便潜在地提高扫描可靠性。
要提高扫描组件的可靠性,请调整barCodeScannerSettings。您可以尝试更改barCodeScannerSettings={{ barCodeTypes:[Camera.Constants.BarCodeType.qr] }}。
字符串
barCodeTypes:此代码片段中的[Camera.Constants.BarCodeType.qr]表示摄像头应该只能识别QR码。这可以减少摄像头的处理负载,同时提高QR码识别的精度和速度。