React Native 카메라 바코드 스캐너

글쓴이 이 용민 | | 댓글 없음 | Mobile

I. 목표

웹뷰 기반의 하이브리드 앱에서는 카메라를 이용하여 바코드를 스캔할수 있는 기능을 연구한다.

II. 연구 및 개발내용

1. 라이브러리 설치

npm install react-native-camera-kit –save

 

      • IOS의 경우 추가적으로 pod를 설치해야 한다.
cd ios

pod install

 

2. 카메라 권한

가. 안드로이드

./android/app/src/AndroidManifest.xml파일에 아래와 같이 권한 추가

<uses-permission android:name=”android.permission.CAMERA” />

나. IOS

./ios/npc/Info.plist 파일에 아래키를 추가한다.

      • Key  : Privacy – Camera Usage Description
      • Value : 카메라는 QR 코드 리더에 활용합니다.

3. 구현

import { Camera, CameraType } from ‘react-native-camera-kit’;

 

onBarcodeRead = (event) => {

console.log(“*BarcodeDialog.onBarcodeRead()”);

var strData = event.nativeEvent.codeStringValue;

if(strData != null)

{

console.log(” -Data : “, strData +”,첫글자:”, strData.substring(0, 1));

}

}

 

<Camera   style={styles.camera}

cameraType={CameraType.Back}

scanBarcode={true}

showFrame={true}

laserColor=”#ff0000″

frameColor=”#ffffff”

torchMode=”off”

onReadCode={this.onBarcodeRead}>

</Camera>

 

 

III. 결론

카메라를 통해 스캔되면 onReadCode 이벤트를  통해 바코드 정보가 올라오는것을 확인하였다..

태그 , ,