最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - Does scanFromURLAsync not work in expo52? - Stack Overflow

programmeradmin3浏览0评论

I'm developing a webapp with react native and expo in which I need to be able to scan EAN13 barcodes. I've been using expo's documentation to do this, but I've hit a wall.

As much as I try to get the barcode from a photo, everytime I try to use scanFromURLAsync it throws the following error:

_ExpoCameraManager.default.scanFromURLAsync is not a function At first I thought it might be a deprecated method but in expo's documentation it says that it is in ver52 (which is the one I'm using)

Does anyone know why is this happening and how I might solve it, I leave my code below as well as some clarifications.

  • I have already tried importing just scanFromURLAsync directly instead of Camera, it gave the same problem.
  • Please ignore all the mistakes I've surely made that have nothing to do with the question, this code is a draft just to see if I can make it work.
  • Thank you in advance :)
import { CameraView, useCameraPermissions, BarcodeScanningResult, Camera} from 'expo-camera';
import { useRef, useState } from 'react';
import { Button, Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Image } from "expo-image";
export default function Scaner() {
    //const [facing, setFacing] = useState<CameraType>('back');
    const ref = useRef<CameraView>(null);
    const [permission, requestPermission] = useCameraPermissions();
    const [uri, setUri] = useState<string | null>(null);
    const [code, setCode] = useState<string>("");
    
    if (!permission) {
      // Camera permissions are still loading.
      return <View />;
    }
  
    if (!permission.granted) {
      // Camera permissions are not granted yet.
      return (
        <View style={styles.container}>
          <Text style={styles.message}>We need your permission to show the camera</Text>
          <Button onPress={requestPermission} title="grant permission" />
        </View>
      );
    }
    const takePicture = async () => {
        const photo = await ref.current?.takePictureAsync();
        setUri(photo?.uri);
        
        
    };
    
    const scanBarcode = async () => {
        const barcode = await Camera.scanFromURLAsync(uri, ["ean13"]);
        if (barcode.length > 0){ setCode(barcode[0]?.data);}
        else{
          setCode("no");
        }
        
    }
    const renderPicture = () => {
      scanBarcode();
        return (
            <View>
                <Text>The code is: {code}</Text>
                <Image
                 source={{uri}}
                 contentFit="contain"
                 style={{width: 300, aspectRatio: 1}}
                 />
            </View>
        );
    };
    const renderCamera = () => {
        return ( 
            <CameraView
            style= {styles.camera}
            ref={ref}
            responsiveOrientationWhenOrientationLocked
            barcodeScannerSettings={{
                barcodeTypes: ["ean13"]
            }}
         >
            <View style={styles.shutterContainer}>
                <Pressable onPress={takePicture}>
                  
                    {({ pressed }) => (
                        <View
                        style={[
                            styles.shutterBtn,
                            {
                                opacity: pressed ? 0.5 : 1,
                            },
                        ]}
                        >
                            <View
                            style={[
                                styles.shutterBtnInner,
                                {
                                    backgroundColor : "white",
                                },
                            ]}
                            />
                        </View>
                    )}
                </Pressable>
            </View>
        </CameraView>
        );
    };
    return (
      <View style={styles.container}>
        {uri ? renderPicture() : renderCamera()}
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    message: {
      textAlign: 'center',
      paddingBottom: 10,
    },container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      },
      camera: {
        flex: 1,
        width: "100%",
      },
      shutterContainer: {
        position: "absolute",
        bottom: 44,
        left: 0,
        width: "100%",
        alignItems: "center",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingHorizontal: 30,
      },
      shutterBtn: {
        backgroundColor: "transparent",
        borderWidth: 5,
        borderColor: "white",
        width: 85,
        height: 85,
        borderRadius: 45,
        alignItems: "center",
        justifyContent: "center",
      },
      shutterBtnInner: {
        width: 70,
        height: 70,
        borderRadius: 50,
      },
  });```

发布评论

评论列表(0)

  1. 暂无评论