React Native 바코드 스캐너 예제

반응형

목차

개요

React Native로 바코드를 스캔하는 예제입니다. QR 코드 역시 스캔이 가능합니다. 다른 바코드 스캐너 예제를 보면 한 페이지에서 바코드 스캐너를 띄웁니다. 하지만 실무에서는 별개의 페이지에서 스캐너를 띄우는 경우가 많으므로 여기 예제에서는 별개의 페이지에서 스캐너를 띄우는 방법을 살펴보겠습니다. React Native에서 페이지 이동은  React Navigation 라이브러리를 사용합니다.

 

React Navigation 사용법은 아래 링크를 참조하세요.

reactnavigation.org/docs/getting-started/ 

React Navigation

바코드 스캔을 위해서 react-native-camera-kit 라이브러리를 사용합니다. 다른 라이브러리보다 간단하고 명료하게 작동하는 것 같아 이 라이브러리를 선택했습니다.

 

 

라이브러리 설치 및 준비

먼저 React Native 바코드 스캐너 예제 프로젝트를 생성하세요

 

npx react-native init BarcodeScannerExample

 

그 다음 React Navigation 라이브러리를 설치하세요

 

yarn add @react-navigation/native

yarn add @react-navigation/stack

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

그 다음 react-native-camera-kit 라이브러리를 설치하세요.

 

npm install react-native-camera-kit --save

 

안드로이드 프로젝트 소스 수정

AndroidManifest.xml

 

카메라 권한을 지정하세요.

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.barcodescannerexample">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA"/>
    <application

 

iOS 프로젝트 소스 수정

info.plist

 

카메라 권한을 지정하세요. “Privacy-Camera Usage Description” 키를 생성한 다음 적당한 문구를 입력하세요. 예를 들어

"이 애플리케이션은 카메라 접근이 필요합니다."

 

 

React Native 프로젝트 소스 수정 

 

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Home, BarcodeScanner} from './src/screen'


const navOptionHandler = () => ({
  headerShown: false
})


const StackApp = createStackNavigator();


export default function App() {
  return (
    <NavigationContainer>
      <StackApp.Navigator initialRouteName="Home">       
        <StackApp.Screen name="Home" component={Home} options={navOptionHandler} />
        <StackApp.Screen name="BarcodeScanner" component={BarcodeScanner} options={navOptionHandler} />
      </StackApp.Navigator>
    </NavigationContainer>
  );
}

 

 

 

src/screen 폴더를 생성하고 index.js, Home.js, BarcodeScanner.js 파일을 만드세요.

 

index.js

export * from "./Home"
export * from "./BarcodeScanner"

 

Home.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { Component } from 'react';
import { Button, Alert, View, SafeAreaView, PermissionsAndroid, Platform } from 'react-native';


//default는 App.js에서만 사용해야 하는 듯 
export class Home extends Component {
    /**
 * 바코드 스캔
 */
    scanBarcode = () => {

        var that = this;
        //To Start Scanning
        if (Platform.OS === 'android') {
            async function requestCameraPermission() {
                try {
                    const granted = await PermissionsAndroid.request(
                        PermissionsAndroid.PERMISSIONS.CAMERA, {
                        'title': '카메라 권한 요청',
                        'message': '바코드를 스캔하기 위해 카메라 권한을 허용해주세요.'
                    }
                    )
                    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                        //If CAMERA Permission is granted

                        //TODO BarcodeScanner.js를 호출하세요 
                        //this가 아니라 that을 사용해야 함 
                        that.props.navigation.navigate('BarcodeScanner', { onGetBarcode: that.onGetBarcode })
                    } else {
                        alert("카메라 권한을 받지 못했습니다.");
                    }
                } catch (err) {
                    alert("카메라 권한 오류: ", err);
                    console.warn(err);
                }
            }
            //Calling the camera permission function
            requestCameraPermission();
        } else {
            that.props.navigation.navigate('BarcodeScanner', { onGetBarcode: that.onGetBarcode })
        }
    }

    onGetBarcode = (barcodeValue) => {
        console.log("barcode value: ", barcodeValue);
        //아래 함수의 파라미터로 문자열만 넘길 수 있음. barcodeValue가 문자열처럼 보이지만 문자열이 아닌 듯. String()는 작동하지 않음. JSON.stringify()는 작동함 
        Alert.alert("barcode value: ", barcodeValue);
    };


    render() {
        return (
            <View style={{ flex: 1 }}>
                <SafeAreaView style={{ flex: 1, justifyContent: "center",  alignItems: "center"}}>
                    <Button
                        title="바코드 스캔"
                        onPress={() => this.scanBarcode()}
                        />
                </SafeAreaView>
            </View>
        );

    }

}

 

 

BarcodeScanner.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { Component } from 'react';
import { View, PermissionsAndroid, Platform } from 'react-native';
import { CameraKitCameraScreen, } from 'react-native-camera-kit';

var isFirstGet = true;
//default는 App.js에서만 사용해야 하는 듯 
export class BarcodeScanner extends Component {

  constructor(props) {
    super(props);
  };


  componentDidMount() {
    //isFirstGet의 이전 값이 남아 있어서 다시 실행할 때 true를 할당해야 함 
    isFirstGet = true;
  }

  componentWillUnmount() {

  }


  /**
 * 바코드 스캔
 */

  onBarcodeScan(barcodeValue) {
    console.log("onBarcodeScan")
    if (!isFirstGet) {      
      return
    }

    isFirstGet = false
    this.props.route.params.onGetBarcode(barcodeValue);
    //TODO 필요한 부분 구현하세요
    this.props.navigation.navigate('Home')
    
    //called after te successful scanning of QRCode/Barcode
    console.log("scanned barcode value: " + barcodeValue)
  }

  //TODO Home.js로 이동시키세요 
  checkCameraPermission() {

  }


  render() {
    return (
      <View style={{ flex: 1 }}>
        <CameraKitCameraScreen
          showFrame={true}
          //Show/hide scan frame
          scanBarcode={true}
          //Can restrict for the QR Code only
          laserColor={'blue'}
          //Color can be of your choice
          frameColor={'yellow'}
          //If frame is visible then frame color
          colorForScannerFrame={'black'}
          //Scanner Frame color
          onReadCode={event =>
            this.onBarcodeScan(event.nativeEvent.codeStringValue)
          }
        />
      </View>
    );
  }
}

 

완료

React Native 앱을 실행하면 화면 가운데 바코드 스캔 버튼이 표시됩니다. 이 버튼을 누르면 바코드 스캔 화면이 실행됩니다. 임의의 바코드 에 카메라를 갖다 대면 바코드를 스캔하고 메인화면으로 돌아와 알림창이 뜹니다.

 

 

전체 소스

 

아래 Github에서 전체소스를 다운받으세요.

 

github.com/goodsogi/BarcodeScannerExample

 

그 다음 npm install과 cd ios/ && pod install을 해서 필요한 라이브러리를 설치하세요.