expo - 바코드 스캐너 구현

0.0 Introduction

expo에서 바코드 스케너를 구현하는 일은 단순한 작업이다. expo 에서 제공하는 expo-barcode-scanner를 사용하면 된다.  expo-barcode-scanner는 디바이스의 카메라에대한 viewfinder를 렌더 시키고 카메라에서 캐치되는 바코드를 인식할수 있는 리액트 컴포넌트를 제공한다. 

 

NOTE : 결국  expo install expo-barcode-scanner를 이용해 설치하고 쓰면된다.  하지만 디바이스의 카메라를 사용하기 때문에 카메라 permission을 설정하고 동의를 받아내는것은 필수이다!!

 

아래의 명령어로 설치를 진행하자.

expo install expo-barcode-scanner

1.0 BarCodeScanner

바코드 스케너는 <BarCodeScanner />의 형태를 가진 View를 제공한다. 바코드 스케너의 경우 아래와같이 임포트 시킬수있다.

import { BarCodeScanner } from 'expo-barcode-scanner';

 

1.0 BarCodeScanner Probs

type( string ) -- 핸드폰의 앞쪽 카메라를 사용할지 또는 뒤쪽 카메라를 사용할지 정하는 곳이다. 기본적으로 뒤로 설정되어 있다.

 

barCodeTypes( Array | <string> ) -- 산업에서 사용되고 있는 바코드 타입을 정하는 곳이다. 기본적으로 엑스포 document에 있는 (20개정도?) 타입 모두를 포함하고 있다. 사실 베터리 사용측면에서 많은 손해가 있으므로 필요한 타입만 정해서 사용해야한다. 예를 들면 아래와 같다.

 

barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}.

onBarCodeScanned (fuction) -- 바코드 스캔이 성공했을때 콜백되는 함수이다.

이함수는 스캔 결과(BarCodeScanner.BarCodeScannerResult)를 받아 실행된다. 

 

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>
  );
}

컴포넌트가 마운트되면 useEffect가 실행된다. 마지막에 빈 리스트 이기 떄문이다. 바코드 스케너에서 제공하는 permission확인하는 함수 requestPermissionAsync()를 이용하여 permission되있는지 확인을 한다.