react-native에서 NFC를 읽어보자

생각보다는..? 쉬워요!

6 min readJul 31, 2019

--

1. react-native-nfc-manager 설치
2. Android 프로젝트 설정
3. react-native 코드 작성 (1)
4. iOS 프로젝트 설정 (😇😇😇)
5. react-native 코드 작성 (2)
6. 트러블슈팅

요런 느낌으로 순서대로.. 아주 가볍게 해볼게요
전체 코드는 여기에 올려 두었습니다

yarn add react-native-nfc-manager react-native link react-native-nfc-manager

시작에 앞서 먼저 github에 있는 문서를 잘 읽어봅시다.

참 그리고 저는 react-native 0.59.10으로 했어요.
얘가 0.60에도 대응하는지는 잘 모르겠어요.

AndroidManifest.xml에 다음을 추가해 줍시다.
<uses-feature android:name="android.hardware.nfc" android:required="false" />

적당~히 작성해 볼까요?

(1/3): 먼저 NFC 리더 초기화를 합니다.

(2/3): 준비가 되었으면 registerTagEvent()로 리스너를 등록하고, 값을 읽어옵시다.

(3/3): 할 일을 마쳤으면 직접 NfcManager를 종료시켜줘야 합니다.

여기까지 하면 안드로이드 기기에서 NFC 태그를 읽어보실 수 있을거에요~

저는 여기서 제일 많이 해맸습니다. 어려웠어요. 먼저 들어가기전에 확인하셔야 하는게 있습니다.

Apple Developer Program에 가입되어 있으신가요?
만약 가입이 안 되어 있으시다면 iOS 프로젝트에서 NFC 권한을 얻을 수가 없습니다.

그럼 가입되어 있다는 전제 하에 진행해볼게요
우선 애플 개발자 페이지로 접속해주세요.

그리고 마지막으로 .plist에 다음 NFC 관련 key-string을 넣어줍니다.

<key>NFCReaderUsageDescription</key>
<string>YOUR_PRIVACY_DESCRIPTION</string>

이제 Destination을 아이폰 등의 기기로 잡고 빌드할 수 있습니다.

iOS에서는 NfcManager.isEnabled()를 지원하지 않기 때문에 아까 작성한 코드를 조금 고쳐야 됩니다.

#2~5의 bypass 코드를 넣어주세요

여기까지 하면 iOS 기기에서 NFC 태그를 읽어보실 수 있을거에요~

Android에서 NFC를 켜거나 NFC 모드를 변경할 때 이벤트가 있나요?
→ NfcManager.onStateChange()리스너를 사용하세요
iOS는 NFC를 어떻게 켜나요?
→ iOS는 설정 등에서 따로 on/off 할 수 없습니다.
코드에서 registerTagEvent()를 호출하는 것으로 NFC 읽기가 시작됩니다.
Apple Developer Program에 가입되어 있지 않은데..
적당히 .entitlements 파일 만들어서 해볼 수는 없나요?
→ 시뮬레이터에는 올라가지만 기기에 올려보려면 Signing이 필요합니다.
애플 개발자 페이지에서 NFC Tag Reading을 체크할 수 없습니다.
비활성화 되어 있어요.
→ App ID를 등록하실 때 Bundle ID를 explict로 설정했는지 확인해 주세요
xcode Capabilities에 NFC가 안 보여요
→ Near Field Communication으로 써있습니다.
→ 그리고 App ID를 등록했는지 확인해 주세요
xcode에서 빌드는 정상적으로 완료되었지만, 그 다음 에러가 나면서 진행이 안 됩니다.
→ Provisioning Profile 문제일 것 같은데요.. 설정을 한 번 확인해 보세요. 예를 들면.. 정확한 개발자 인증서Certificates를 해당 Provisioning Profile에 설정 하셨나요?
iOS 기기에서 registerTagEvent쪽에 signal SIGABRT 에러가 납니다.
→ .plist에 권한을 추가하셨는지 확인해 주세요

이상입니다. 참고가 되시길요! 🙂🙂🙂