{"id":2413,"date":"2024-10-31T17:11:26","date_gmt":"2024-10-31T08:11:26","guid":{"rendered":"http:\/\/blog.moramcnt.com\/?p=2413"},"modified":"2024-10-31T17:11:26","modified_gmt":"2024-10-31T08:11:26","slug":"react-native-%eb%b0%94%ec%bd%94%eb%93%9c-%ec%8a%a4%ec%ba%90%eb%84%88","status":"publish","type":"post","link":"http:\/\/blog.moramcnt.com\/?p=2413","title":{"rendered":"React Native \ubc14\ucf54\ub4dc \uc2a4\uce90\ub108"},"content":{"rendered":"

I. \ubaa9\ud45c<\/strong><\/p>\n

\uc6f9\ubdf0 \uae30\ubc18\uc758 \ud558\uc774\ube0c\ub9ac\ub4dc \uc571\uc5d0\uc11c\ub294 \ubc14\ucf54\ub4dc\ub97c \uc2a4\uce94\ud560\uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc5f0\uad6c\ud55c\ub2e4.<\/p>\n

II. \uc5f0\uad6c \ubc0f \uac1c\ubc1c\ub0b4\uc6a9<\/strong><\/p>\n

\uc77c\ubc18\uc801\uc778 \ub124\uc774\ud2f0\ube0c\uc571\uc5d0\uc11c\ub294 \ubc14\ucf54\ub4dc \uc2a4\uce90\ub108\ub294 \uad6c\ud604\ud558\uae30 \uc27d\ub2e4. \ud558\uc9c0\ub9cc, \uc6f9\ubdf0 \uae30\ubc18\uc758 \ud558\uc774\ube0c\ub9ac\ub4dc \uc571\uc5d0\uc11c\ub294 \ub124\uc774\ud2f0\ube0c\ub85c \ud50c\ub7ec\uadf8\uc778\uc744 \uad6c\ud604\ud558\uc5ec \uc6f9\uc73c\ub85c \uc804\ub2ec\ud574\uc57c \ud55c\ub2e4.<\/p>\n

1. \ud50c\ub7ec\uadf8\uc778 \ubaa8\ub4c8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/p>\n

1) create-react-native-module \uc124\uce58<\/p>\n\n\n\n
yarn global add create-react-native-module<\/p>\n

\ub610\ub294<\/p>\n

npm install -g create-react-native-module<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

2) \ubaa8\ub4c8\uc0dd\uc131<\/p>\n\n\n\n
create-react-native-module\u00a0 NpcBarcode<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

3) \ud574\ub2f9\ud504\ub85c\uc81d\ud2b8\uc5d0 \ubaa8\ub4c8\uc124\uce58<\/p>\n\n\n\n
cd .\/native_modules<\/p>\n

npm install .\/react-native-npc-barcode<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

2. Urovo \uc2a4\uce90\ub108 \ubaa8\ub4c8 \ucd94\uac00<\/p>\n

\ud574\ub2f9 \ud50c\ub7ec\uadf8\uc778 \ubaa8\ub4c8 \ud504\ub85c\uc81d\ud2b8\uc5d0 Urovo\uc2a4\uce90\ub108 SDK\uc778 platform_sdk_vXXXXjar \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec react-native-npc-barcode\/android\/libs\/ \ud3f4\ub354\uc5d0 \ucd94\uac00\ud55c\ub2e4.<\/p>\n

https:\/\/github.com\/urovosamples\/SDK_ReleaseforAndroid<\/a><\/p>\n

 <\/p>\n

3. Urovo \uc2a4\uce90\ub108 \uad6c\ud604<\/p>\n\n\n\n
private ScanManager mClsScanManager\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = null;<\/p>\n

private ReactApplicationContext mClsContext = null;<\/p>\n

private UrovoBroadcastReceiver mClsReceiver = null;<\/p>\n

private IntentFilter mClsIntentFilter = new. IntentFilter(ScanManager.ACTION_DECODE);<\/p>\n

 <\/p>\n

public UrovoScanner(ReactApplicationContext clsContext)<\/p>\n

{<\/p>\n

Log.d(LOGGER_TAG, “*UrovoScanner() \uc0dd\uc131\uc790 “);<\/p>\n

this.mClsContext\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = clsContext;<\/p>\n

this.mClsScanManager\u00a0\u00a0\u00a0 = new ScanManager();<\/p>\n

this.mClsReceiver\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = new UrovoBroadcastReceiver(clsContext);<\/p>\n

this.mClsContext.registerReceiver(this.mClsReceiver,<\/p>\n

this.mClsIntentFilter);<\/p>\n

this.mClsContext.addLifecycleEventListener(lifecycleEventListener);<\/p>\n

}<\/p>\n

 <\/p>\n

@Override<\/p>\n

public boolean start()<\/p>\n

{<\/p>\n

boolean boolResult = false;<\/p>\n

try<\/p>\n

{<\/p>\n

boolResult = mClsScanManager.openScanner();<\/p>\n

Log.d(LOGGER_TAG, “*UrovoScanner.start(), Result: ” + boolResult);<\/p>\n

}<\/p>\n

catch (Exception e)<\/p>\n

{<\/p>\n

Log.d(LOGGER_TAG, “*UrovoScanner.start() Exception :”+ e.getMessage());<\/p>\n

}<\/p>\n

return boolResult;<\/p>\n

}<\/p>\n

@Override<\/p>\n

public boolean stop()<\/p>\n

{<\/p>\n

boolean boolResult = false;<\/p>\n

try<\/p>\n

{<\/p>\n

boolResult = mClsScanManager.closeScanner();<\/p>\n

Log.d(LOGGER_TAG, “*UrovoScanner.stop(), Result: ” + boolResult);<\/p>\n

}<\/p>\n

catch (Exception e)<\/p>\n

{<\/p>\n

Log.d(LOGGER_TAG, “*UrovoScanner.stop() Exception :”+ e.getMessage());<\/p>\n

}<\/p>\n

return boolResult;<\/p>\n

}<\/p>\n

 <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

4. \uc6f9\uc5b4\uc11c \ub124\uc774\ud2b8\ube0c\ub97c \ud638\ucd9c\ud558\uae30 \uc704\ud55c index.js\ud30c\uc77c \uad6c\ud604<\/p>\n\n\n\n
import { NativeEventEmitter, NativeModules } from ‘react-native’;<\/p>\n

const { NpcBarcode } = NativeModules;<\/p>\n

const isAndroid = Platform.OS === ‘android’;<\/p>\n

let clsEmitter = null;<\/p>\n

if(isAndroid) clsEmitter = new NativeEventEmitter();<\/p>\n

 <\/p>\n

export default class NpcBarcodeScanner<\/p>\n

{<\/p>\n

static async init(strBrand)<\/p>\n

{<\/p>\n

console.log(“NpcBarcodeScanner.init(), Brand:”+ strBrand);<\/p>\n

return await NpcBarcode.init(strBrand);<\/p>\n

}<\/p>\n

static addEventListener(strEventType, objHandler)<\/p>\n

{<\/p>\n

console.log(“NpcBarcodeScanner.addEventListener()”);<\/p>\n

if(clsEmitter != null) return clsEmitter.addListener(strEventType, (data) => { objHandler(data); });<\/p>\n

return null;<\/p>\n

}<\/p>\n

 <\/p>\n

static removeEventListener(objListener)<\/p>\n

{<\/p>\n

console.log(“NpcBarcodeScanner.removeEventListener()”);<\/p>\n

NpcBarcode.release();<\/p>\n

if(objListener != null)<\/p>\n

{<\/p>\n

objListener.remove();<\/p>\n

}<\/p>\n

}<\/p>\n

static async start()<\/p>\n

{<\/p>\n

console.log(“*NpcBarcodeScanner.start()”);<\/p>\n

return await NpcBarcode.start();<\/p>\n

}<\/p>\n

static async stop()<\/p>\n

{<\/p>\n

console.log(“*NpcBarcodeScanner.stop()”);<\/p>\n

return await NpcBarcode.stop();<\/p>\n

}<\/p>\n

};<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

5. React Native\uc5d0\uc11c \ubc14\ucf54\ub4dc \uc2a4\uce90\ub108 \ud638\ucd9c<\/p>\n\n\n\n
import BarcodeScanner from\u00a0 “react-native-npc-barcode”;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

BarcodeScanner.start(),\u00a0BarcodeScanner.stop()\u00a0\uba85\ub839\ub4f1\uc744 \uc774\uc6a9\ud558\uc5ec \ubc14\ucf54\ub4dc \uc2a4\uce94\uc2dc\uc791, \uc885\ub8cc \ucc98\ub9ac<\/p>\n

 <\/p>\n

III. \uacb0\ub860<\/strong><\/p>\n

\uac04\ub2e8\ud788 \ub9cc\ub4e4\uc5b4\ubcf4\uc558\uc9c0\ub9cc \ub124\uc774\ud2b8\ube0c\ub97c \ud1b5\ud574 \ud558\uc774\ube0c\ub9ac\ub4dc \uc6f9\uc5d0 \uc804\ub2ec\ub41c \ubc14\ucf54\ub4dc\ub294 \uc798 \uc77d\ud614\uace0, \uc18d\ub3c4\ub3c4 \uad1c\ucc2e\uc558\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"

I. \ubaa9\ud45c \uc6f9\ubdf0 \uae30\ubc18\uc758 \ud558\uc774\ube0c\ub9ac\ub4dc \uc571\uc5d0\uc11c\ub294 \ubc14\ucf54\ub4dc\ub97c \uc2a4\uce94\ud560\uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc5f0\uad6c\ud55c\ub2e4. II. \uc5f0\uad6c \ubc0f \uac1c\ubc1c\ub0b4\uc6a9 \uc77c\ubc18\uc801\uc778 \ub124\uc774\ud2f0\ube0c\uc571\uc5d0\uc11c\ub294 \ubc14\ucf54\ub4dc \uc2a4\uce90\ub108\ub294 \uad6c\ud604\ud558\uae30 \uc27d\ub2e4. \ud558\uc9c0\ub9cc, \uc6f9\ubdf0 \uae30\ubc18\uc758 \ud558\uc774\ube0c\ub9ac\ub4dc \uc571\uc5d0\uc11c\ub294 \ub124\uc774\ud2f0\ube0c\ub85c \ud50c\ub7ec\uadf8\uc778\uc744 \uad6c\ud604\ud558\uc5ec \uc6f9\uc73c\ub85c \uc804\ub2ec\ud574\uc57c \ud55c\ub2e4. 1. \ud50c\ub7ec\uadf8\uc778 \ubaa8\ub4c8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 1) create-react-native-module \uc124\uce58 yarn global add create-react-native-module \ub610\ub294 npm install -g create-react-native-module   2) \ubaa8\ub4c8\uc0dd\uc131 create-react-native-module\u00a0 NpcBarcode   […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[21],"tags":[259,298],"class_list":["post-2413","post","type-post","status-publish","format-standard","hentry","category-mobile","tag-react-native","tag-298"],"_links":{"self":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2413"}],"version-history":[{"count":2,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2413\/revisions"}],"predecessor-version":[{"id":2415,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2413\/revisions\/2415"}],"wp:attachment":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}