扫描二维码后获取数据到输入框

Question

每次扫描 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,
    fontWeight:"bold",
    padding:4,
    textAlign: 'center',
    width: '30%',
    opacity:0.6,
    color: colors.purple,
  },
})

这是我用来从 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>

Answer 1

您不必在此处使用 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]);

这将在用户返回时正确设置代码。

扫描二维码后获取数据到输入框

Get data into the input field after Qr code Scanned

qr-code

react-native

asyncstorage