I. 목표
웹뷰 기반의 하이브리드 앱에서는 바코드를 스캔할수 있는 기능을 연구한다.
II. 연구 및 개발내용
일반적인 네이티브앱에서는 바코드 스캐너는 구현하기 쉽다. 하지만, 웹뷰 기반의 하이브리드 앱에서는 네이티브로 플러그인을 구현하여 웹으로 전달해야 한다.
1. 플러그인 모듈 프로젝트 생성
1) create-react-native-module 설치
| yarn global add create-react-native-module
또는 npm install -g create-react-native-module |
2) 모듈생성
| create-react-native-module NpcBarcode |
3) 해당프로젝트에 모듈설치
| cd ./native_modules
npm install ./react-native-npc-barcode |
2. Urovo 스캐너 모듈 추가
해당 플러그인 모듈 프로젝트에 Urovo스캐너 SDK인 platform_sdk_vXXXXjar 파일을 다운로드하여 react-native-npc-barcode/android/libs/ 폴더에 추가한다.
https://github.com/urovosamples/SDK_ReleaseforAndroid
3. Urovo 스캐너 구현
| private ScanManager mClsScanManager = null;
private ReactApplicationContext mClsContext = null; private UrovoBroadcastReceiver mClsReceiver = null; private IntentFilter mClsIntentFilter = new. IntentFilter(ScanManager.ACTION_DECODE);
public UrovoScanner(ReactApplicationContext clsContext) { Log.d(LOGGER_TAG, “*UrovoScanner() 생성자 “); this.mClsContext = clsContext; this.mClsScanManager = new ScanManager(); this.mClsReceiver = new UrovoBroadcastReceiver(clsContext); this.mClsContext.registerReceiver(this.mClsReceiver, this.mClsIntentFilter); this.mClsContext.addLifecycleEventListener(lifecycleEventListener); }
@Override public boolean start() { boolean boolResult = false; try { boolResult = mClsScanManager.openScanner(); Log.d(LOGGER_TAG, “*UrovoScanner.start(), Result: ” + boolResult); } catch (Exception e) { Log.d(LOGGER_TAG, “*UrovoScanner.start() Exception :”+ e.getMessage()); } return boolResult; } @Override public boolean stop() { boolean boolResult = false; try { boolResult = mClsScanManager.closeScanner(); Log.d(LOGGER_TAG, “*UrovoScanner.stop(), Result: ” + boolResult); } catch (Exception e) { Log.d(LOGGER_TAG, “*UrovoScanner.stop() Exception :”+ e.getMessage()); } return boolResult; }
|
4. 웹어서 네이트브를 호출하기 위한 index.js파일 구현
| import { NativeEventEmitter, NativeModules } from ‘react-native’;
const { NpcBarcode } = NativeModules; const isAndroid = Platform.OS === ‘android’; let clsEmitter = null; if(isAndroid) clsEmitter = new NativeEventEmitter();
export default class NpcBarcodeScanner { static async init(strBrand) { console.log(“NpcBarcodeScanner.init(), Brand:”+ strBrand); return await NpcBarcode.init(strBrand); } static addEventListener(strEventType, objHandler) { console.log(“NpcBarcodeScanner.addEventListener()”); if(clsEmitter != null) return clsEmitter.addListener(strEventType, (data) => { objHandler(data); }); return null; }
static removeEventListener(objListener) { console.log(“NpcBarcodeScanner.removeEventListener()”); NpcBarcode.release(); if(objListener != null) { objListener.remove(); } } static async start() { console.log(“*NpcBarcodeScanner.start()”); return await NpcBarcode.start(); } static async stop() { console.log(“*NpcBarcodeScanner.stop()”); return await NpcBarcode.stop(); } }; |
5. React Native에서 바코드 스캐너 호출
| import BarcodeScanner from “react-native-npc-barcode”; |
BarcodeScanner.start(), BarcodeScanner.stop() 명령등을 이용하여 바코드 스캔시작, 종료 처리
III. 결론
간단히 만들어보았지만 네이트브를 통해 하이브리드 웹에 전달된 바코드는 잘 읽혔고, 속도도 괜찮았다.