React Native 에서 NFC 사용하기

React Native 에서 NFC 사용하기

  react-native-nfc-manager

RN 에서 NFC 사용 가능

iOS 는 iOS 11 이상부터 지원

NFC 를 읽거나 쓰기 가능

1. react-native-nfc-manager 세팅

         yarn add react-native-nfc-manager
   
         cd ./ios && pod install
   

         import NFCManager, { NfcEvents } from 'react-native-nfc-manager';
   

2. 초기화

const initNFC = async () => {
      // NFC 지원하는지 확인
    const isNFCSupport = await getIsNFCSupport();
    alert(isNFCSupport);
    if (!isNFCSupport) {
      alert('NFC 를 지원하지 않는 기기 입니다');
      return;
    }
      // NFC 활성화 확인
    const isNFCEnabled = await getIsNFCEnabled();
    alert(isNFCEnabled);
    if (!isNFCEnabled) {
      alert('NFC 가 활성화되어 있지 않습니다');
      return;
    }
  };

  // start 로 init
  // isSupported 로 NFC 확인 유무 확인
  const getIsNFCSupport = async () => {
    try {
      await NFCManager.start();
      await NFCManager.isSupported();
      return true;
    } catch (e) {
      return false;
    }
  };

  // iOS 이고 version 이 11 이상이면 통과
  const getIsNFCEnabled = async () => {
    const isIOS = Platform.OS === 'ios';
    const iOSVersion = parseInt(Platform.Version, 10) >= 11;
    if (isIOS && iOSVersion) {
      return true;
    }
    // NFC 가 활성화 상태인지 확인
    try {
      const isNFCEnabled = await NFCManager.isEnabled();
      return isNFCEnabled;
    } catch (e) {
      return false;
    }
  };

1. 읽어오기

const readNFC = async () => {
    const isNFCSupport = await getIsNFCSupport();
    if (!isNFCSupport) {
      const message = {
        type: 'NFCRead',
        data: Error('Not Support'),
      };
      webViewRef.postMessage(JSON.stringify(message));
      return;
    }
    const isNFCEnabled = await getIsNFCEnabled();
    if (!isNFCEnabled) {
      const message = {
        type: 'NFCRead',
        data: Error('Not Enabled'),
      };
      webViewRef.postMessage(JSON.stringify(message));
      return;
    }
    let tag = null;

    try {
      await NFCManager.requestTechnology([NfcTech.Ndef]);

      tag = await NFCManager.getTag();
      tag.ndefStatus = await NFCManager.ndefHandler.getNdefStatus();

      if (Platform.OS === 'ios') {
        await NFCManager.setAlertMessageIOS('Success');
      }
    } catch (ex) {
      // for tag reading, we don't actually need to show any error
      console.log(ex);
    } finally {
      NFCManager.cancelTechnologyRequest();
    }

    const message = { type: 'NFCRead', data: tag };
    webViewRef.postMessage(JSON.stringify(message));
  };