[expo] expo-camera를 이용해서 바코드 스캔 구현하기

qr 말고 바코드 스캔하는 기능을 만들어야 하는데 전에 만든 기능은 RN 라이브러리이다 보니 Expo에서 제공하는 기능으로 바꾸려고 한다.

 

Expo면 Expo 답게! RN이면 RN답게 !

 

공식 문서를 보면 Expo BarCodeScanner 라이브러리가 있는게 이제는 사용하지 않는다고 나와 있으니 주의하시길! 

안내문처럼 expo-camera를 사용하면 된다고 한다.

 

https://docs.expo.dev/versions/latest/sdk/camera/

Camera

 

위에 링크 들어가서 Expo 공식 문서 그대로 설치하고 사용하면 된다.

 

1. 설치

npx expo install expo-camera

 

2. 적용

import { useModal } from "@/hooks/useModal";
import { BarcodeScanningResult, CameraView, useCameraPermissions } from "expo-camera";
import { useEffect, useRef } from "react";
import { Alert, Linking, Vibration, View } from "react-native";
import { useMagicModal } from "react-native-magic-modal";
import FontText from "../atom/FontText";

interface IBarcodeScannerProps {
  onBarcodeScan: (code: string) => void;
}

export default function BarcodeScanner({ onBarcodeScan }: IBarcodeScannerProps) {
  const [permission, requestPermission] = useCameraPermissions();
  const { openModal } = useModal();
  const { hide } = useMagicModal();
  const cameraRef = useRef(null);

  const checkPermissions = async () => {
    if (!permission) return;

    if (permission.status !== "granted") {
      if (!permission.canAskAgain) {
      //권한 설정 알림을 커스텀 모달로 띄울거임
        openModal({
          title: "권한 필요",
          content: "앱 설정에서 카메라 권한을 변경해주세요.",
          buttons: [
            {
              text: "설정 열기",
              color: "green",
              onPress: () => {
                Linking.openSettings();
              },
            },
            {
              text: "취소",
              color: "lightGray",
              onPress: () => {
                hide();
              },
            },
          ],
        });
      } else {
        requestPermission();
      }
    }
  };

  useEffect(() => {
    checkPermissions();
  }, [permission]);

  const onReadCode = (scanningResult: BarcodeScanningResult) => {
  //부모에서 받아온 바코드의 값을 저장하는 함수
    onBarcodeScan(scanningResult.data);
    Vibration.vibrate(100);
    hide();
  };

  return (
    <CameraView
      ref={cameraRef}
      barcodeScannerSettings={{
      //원하는 코드 타입 넣기
        barcodeTypes: ["ean13", "code128"],
      }}
      onBarcodeScanned={onReadCode}
      animateShutter={true}
      style={{ width: 300, height: 400 }}
    />
  );
}