NFC를 태그하고 페이지를 이동하는 법

저번 시간에 @react-navigation-native를 이용해서 페이지 이동까지 구현했습니당.
오늘 해야 할 것은 태그에 적힌 메세지를 읽고 해당하는 페이지로 이동해야합니다.

nfc-manager 사용법

GitHub - revtel/react-native-nfc-manager: React Native NFC module for Android & iOS

설치하고 아래에 있는 예제 코드를 사용하면 tag가 읽혀지고 값을 얻을 수 있습니다.

components/NfcReader.js

import React from 'react';
import {TouchableOpacity, View, Text, StyleSheet} from 'react-native';
import NfcManager, {Ndef, NfcTech} from 'react-native-nfc-manager';

const NfcReader = ({setPageName}) => {
  const readNdef = async () => {
    try {
      await NfcManager.requestTechnology(NfcTech.Ndef);
      const tag = await NfcManager.getTag();
      setPageName(Ndef.text.decodePayload(tag.ndefMessage[0].payload));
    } catch (ex) {
      console.warn('Oops!', ex);
    } finally {
      NfcManager.cancelTechnologyRequest();
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={readNdef} style={styles.button}>
        <Text style={styles.text}>태그 읽기</Text>
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
  text: {
    color: 'black',
  },
});
export default NfcReader;

tag에 찍히는 콘솔은 [10, 145, 20, 44] 같은 숫자로 오는데 Ndef.text.decodePayload()을 사용하면 글자로 바꿀수있음

components/NfcNavigator.js

import {useEffect, useState} from 'react';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import NfcReader from './NfcReader';

const NfcNavigator = () => {
  const navigation = useNavigation();
  const [pageName, setPageName] = useState('');

  useEffect(() => {
    if (pageName !== '') {
      navigation.navigate(pageName);
    }
  }, [pageName]);

  return <NfcReader setPageName={setPageName} />;
};

export default NfcNavigator;

useNavigation()을 사용하면 navigate() 을 사용할 수 있음.
NfcReader.js에서 태그를 읽고 pageName을 변경하고 해당하는 화면으로 전환시킴

두개를 컴포넌트화 시켜서 어디서든 사용할수있게끔 했는데 지금은 버튼형식이고 토글형식으로 할지 아니면 언제든 태깅할수있게 할지는 미지수.. 일단 버튼으로