Comment transmettre des données au backend dans React Native
J'essaie de développer une application de scanner de codes-barres pour IOS, maintenant j'ai réussi à créer un scanner capable de lire les données des codes-barres, mais pas seulement de lire les données, je veux aussi stocker les données dans une base de données, j'ai Après explorer une partie du code source de l’autre côté est mon code.
scanner.js
Voici la source d'un scanner capable déjà de lire les données des codes-barres
import React, { useState, useEffect,Component,onMount} from 'react';
import { Text,TextInput, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import {useNavigation} from'@react-navigation/native';
import {StatusBar} from 'expo-status-bar';
export default function Scanner () {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [userid, setText] = useState('Not yet scanned')
const [currentDate, setCurrentDate] = useState('');
const navigation = useNavigation();
const askForCameraPermission = () => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})()
}
// Request Camera Permission
useEffect(() => {
askForCameraPermission();
}, []);
useEffect(() => {
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
var hours = new Date().getHours(); //Current Hours
var min = new Date().getMinutes(); //Current Minutes
var sec = new Date().getSeconds(); //Current Seconds
setCurrentDate(
date + '/' + month + '/' + year
+ ' ' + hours + ':' + min + ':' + sec
);
}, []);
// What happens when we scan the bar code
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
setText(data )
};
// 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}>{userid + '\n'+currentDate}
</Text>
{
scanned && <Button title={'Scan again?'} onPress={() => setScanned(false)} color='tomato' />
}
{
scanned && <Button title={'OK'} onPress={()=> navigation.navigate('Home',{userid})} />
}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
maintext: {
fontSize: 16,
margin: 20,
},
barcodebox: {
alignItems: 'center',
justifyContent: 'center',
height: 300,
width: 300,
overflow: 'hidden',
borderRadius: 30,
backgroundColor: 'tomato'
}
});
Après avoir exploré les moyens d'envoyer des données au backend, cela nécessite ce type de code, mais comment implémenter ce code dans mon scanner.js ? J'espère que tout le monde pourra aider, merci
export default class Scanner extends Component {
constructor(props) {
super(props);
this.state = {userid: ''};
}
Register = () => {
let userid = this.state.userid;
let InsertAPIURL = "http://localhost/api/insert.php";
let headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
let Data = {
userid: userid,
};
fetch(InsertAPIURL, {
method: 'POST',
headers: headers,
body: JSON.stringify(Data)
})
.then((response) =>response.json())
.then((response)=>{
alert(response[0].Message);
})
.catch((error) => {
alert("Error"+error);
})
}
}