[React Native] NFC 스캔 - 안드로이드

[사용 라이브러리]

https://www.npmjs.com/package/react-native-nfc-manager

react-native-nfc-manager

[환경]

RN 0.61.5

 

1. 라이브러리 설치

# RN >= 0.60 
npm i --save react-native-nfc-manager

 

2. Set Up

AutoLink가 되므로 안드로이드는 해줄게 없음!

 

근데 android/app.src/main/AndroidManifest.xml

<manifest> 태그 안에

<uses-feature android:name="android.hardware.nfc" android:required="false" />

추가?

https://medium.com/@eungook/react-native%EC%97%90%EC%84%9C-nfc%EB%A5%BC-%EC%9D%BD%EC%96%B4%EB%B3%B4%EC%9E%90-7f2afa73737b

이 링크에서 추가하길래..! 추가 안해도 동작되면 괜찮다. 문서에 없으니까!

 

3. Example - NFC Read

https://github.com/whitedogg13/react-native-nfc-manager/blob/HEAD/example/AppV2.js

import React from 'react'
import {
  View, Text, TouchableOpacity
} from 'react-native'
import NfcManager, {NfcEvents} from '../NfcManager';

class AppV2 extends React.Component {
  componentDidMount() {
    NfcManager.start();
    NfcManager.setEventListener(NfcEvents.DiscoverTag, tag => {
      console.warn('tag', tag);
      NfcManager.setAlertMessageIOS('I got your tag!');
      NfcManager.unregisterTagEvent().catch(() => 0);
    });
  }

  componentWillUnmount() {
    NfcManager.setEventListener(NfcEvents.DiscoverTag, null);
    NfcManager.unregisterTagEvent().catch(() => 0);
  }

  render() {
    return (
      <View style={{padding: 20}}>
        <Text>NFC Demo</Text>
        <TouchableOpacity 
          style={{padding: 10, width: 200, margin: 20, borderWidth: 1, borderColor: 'black'}}
          onPress={this._test}
        >
          <Text>Test</Text>
        </TouchableOpacity>

        <TouchableOpacity 
          style={{padding: 10, width: 200, margin: 20, borderWidth: 1, borderColor: 'black'}}
          onPress={this._cancel}
        >
          <Text>Cancel Test</Text>
        </TouchableOpacity>
      </View>
    )
  }

  _cancel = () => {
    NfcManager.unregisterTagEvent().catch(() => 0);
  }

  _test = async () => {
    try {
      await NfcManager.registerTagEvent();
    } catch (ex) {
      console.warn('ex', ex);
      NfcManager.unregisterTagEvent().catch(() => 0);
    }
  }
}

export default AppV2

setEventListener: 이벤트 리스너를 등록해놓음. nfc를 태그해서 읽을 수는 없음.

registerTagEvent: nfc를 태그할 수 있는 상태가 됨

unregisterTagEvent: nfc 태그하지 못하도록! removeEventListener는 아님~!

 

Test 버튼 누르면 nfc 태그가 가능해짐. 

 

* 휴대폰 내 nfc 태그는 항상 활성화 상태!

 

- Test 버튼 누르기 전 nfc 태그했을 때

사진1

 

- Test 버튼 누른 후 nfc 태그했을 때

성공적으로 nfc 태깅이 되면 setEventListener에서 console.warn 한 내용이 뜸! 

그리고 unregister 코드가 실행됨. 위에 코드에서 그렇게 해뒀으므로.

그래서 2번째로 nfc 태깅하면 다시 위의 [사진1]처럼 뜸. 그게 싫으면 unregister 코드를 삭제하면 됨!