React Native
[expo] expo-camera를 이용해서 바코드 스캔 구현하기
어느새벽
2025. 4. 29. 14:23
반응형
qr 말고 바코드 스캔하는 기능을 만들어야 하는데 전에 만든 기능은 RN 라이브러리이다 보니 Expo에서 제공하는 기능으로 바꾸려고 한다.
Expo면 Expo 답게! RN이면 RN답게 !
공식 문서를 보면 Expo BarCodeScanner 라이브러리가 있는게 이제는 사용하지 않는다고 나와 있으니 주의하시길!

안내문처럼 expo-camera를 사용하면 된다고 한다.
https://docs.expo.dev/versions/latest/sdk/camera/
Camera
A React component that renders a preview for the device's front or back camera.
docs.expo.dev
위에 링크 들어가서 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 }}
/>
);
}
반응형