I’ve an issue with the QR code, I am attempting to scan the QR code, I am utilizing Expo Digicam, however I’ve a weird downside.
I can all the time learn the QR code if the QR code is on the PC however on smartphones/iPhones it can not learn the QR code.
I additionally tried including a field however it would not appear to do the job. Are you able to give me a hand? Please
What can I do?
import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Button, Textual content, Alert } from 'react-native';
import { Digicam } from 'expo-camera';
const types = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
},
preview: {
flex: 1,
justifyContent: 'middle',
alignItems: 'middle',
},
scanText: {
fontSize: 20,
textAlign: 'middle',
margin: 10,
},
qrFrame: {
width: 150, // Riduci ulteriormente le dimensioni del riquadro
peak: 150,
borderRadius: 10,
borderColor: '#FFF',
borderWidth: 2,
place: 'absolute',
justifyContent: 'middle',
alignItems: 'middle',
},
qrCodeText: {
fontSize: 16, // Riduci la dimensione del testo
textAlign: 'middle',
coloration: '#FFF',
},
});
export default operate App() {
const [hasCameraPermission, setHasCameraPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [scannedData, setScannedData] = useState('');
const [serverResponse, setServerResponse] = useState('');
useEffect(() => {
(async () => {
const { standing } = await Digicam.requestCameraPermissionsAsync();
setHasCameraPermission(standing === 'granted');
})();
}, []);
const handleBarCodeScanned = async ({ knowledge }) => {
setScanned(true);
setScannedData(`Dati: ${knowledge}`);
// Ship knowledge to PHP server
strive {
const response = await fetch('https://www.chesifastasera.com/handleQR.php', {
methodology: 'POST',
headers: {
Settle for: 'software/json',
'Content material-Kind': 'software/json',
},
physique: JSON.stringify({ qrData: knowledge }), // Ship knowledge as JSON
});
if (!response.okay) {
throw new Error(`HTTP Error! Code: ${response.standing}`);
}
const responseData = await response.textual content();
setServerResponse(responseData); // Set server response in state
// Show the response in an alert or different means
Alert.alert('Server Response', responseData);
// Different actions based mostly on server response right here
} catch (error) {
console.error('Error throughout server request:', error.message);
// Error dealing with if wanted
}
};
const resetScanner = () => {
setScanned(false);
setScannedData('');
setServerResponse('');
};
if (hasCameraPermission === null) {
return <View />;
}
if (hasCameraPermission === false) {
return <Textual content>Digicam permission denied</Textual content>;
}
return (
<View type={types.container}>
<Digicam
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
type={types.preview}
>
{/* Body the QR code right here */}
<View type={types.qrFrame}>
<Textual content type={types.qrCodeText}>{scannedData}</Textual content>
</View>
</Digicam>
{scanned && (
<View>
<Textual content type={types.scanText}>{`Risposta del server: ${serverResponse}`}</Textual content>
<Button title="Scansiona di nuovo" onPress={resetScanner} />
</View>
)}
</View>
);
}