扫描二维码后将数据输入到输入字段中

问题描述

每次尝试扫描Qr时，我都试图从Qr码获取ID到输入字段。我尝试使用Async-storage来存储扫描后的数据，但是每当我扫描不同的二维码时，它就会显示出第一次扫描的相同二维码。

。

这是我用来创建扫描仪页面的代码。

import React,{ useState,useEffect } from "react";
import { Text,SafeAreaView,StyleSheet,Button,Dimensions,Image } from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";
import colors from "../config/colors";
import AsyncStorage from "@react-native-community/async-storage";

function QrScanner({navigation}) {
  const [hasPermission,setHasPermission] = useState(null);
  const [scanned,setScanned] = useState(false);

  useEffect(() => {
    handleBarCodeScanned();
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  },[]);

  const handleBarCodeScanned = async({ type,data }) => {
    setScanned(true);
    await AsyncStorage.setItem('key',data);
    alert(`Bar code with type ${type},and data ${data} has been scanned!`);
     console.log(await AsyncStorage.getItem('key'));
    
  };
  

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <SafeAreaView
      style={{
        flex: 1,flexDirection: "column",justifyContent: "flex-end",}}
    >
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={[StyleSheet.absoluteFill,styles.container]}>
        <Text style={styles.description}>Scan your QR code</Text>
        <Text
          onPress={() =>navigation.navigate('TempRecordStack')}
          style={styles.cancel}>
          Back
        </Text>
        
        </BarCodeScanner>
        {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </SafeAreaView>
  );
}
export default QrScanner;

const { width } = Dimensions.get('window')
const qrSize = width * 0.7
const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: 'center',},description: {
    fontSize: width * 0.09,fontWeight:"bold",marginTop: '30%',textAlign: 'center',width: '70%',color: colors.purple,cancel: {
    backgroundColor:colors.dark,fontSize: width * 0.05,padding:4,width: '30%',opacity:0.6,})

这是我用来从Async-storage获取数据以获取扫描ID的代码行

const [studentId,setStudentId] = useState({});

    
//To get Scanned data
      const getUserId = async () => {
        var code = await AsyncStorage.getItem("key");
        setStudentId(code);
      };

输入字段

<Text style={styles.text1}>UserId : </Text>
        <View style={styles.action}>
          <TextInput style={styles.Input} value={studentId} />

          <FontAwesome
            name="camera"
            size={20}
            onPress={() => {
              navigation.navigate("QrScanner");
            }}
          />
        </View>

解决方法

您不必在此处使用AsyncStorage，这会增加不必要的复杂性，您可以使用以下参数进行操作

  const handleBarCodeScanned = async({ type,data }) => {
    setScanned(true);
    alert(`Bar code with type ${type},and data ${data} has been scanned!`);
     navigation.navigate('TempRecordStack',{code:data})
  };

在另一个屏幕中，您可以执行以下操作 有使用效果

  React.useEffect(() => {
    if (route.params?.code) {
      setStudentId(route.params?.code);
    }
  },[route.params?.code]);

这将在用户向后导航时正确设置代码。