Reac-Native NFC 标签读取

问题描述 投票:0回答:1

我正在制作一个非常简单的测试应用程序,但遇到了一些问题。我正在尝试制作一个读取 NFC 卡的反应本机应用程序。足够简单了。但是,每次我尝试在手机上执行该应用程序时,它都不会读取任何 NFC 标签。手机型号是小米红米11。我使用的是react-native with expojected(因为我需要在AndroidManifest.xml文件上添加权限)和react-native-nfc-manager最新版本。我有什么任务要出去吗?

代码:

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

const App = () => {
  const [nfcData, setNfcData] = useState(null);
  useEffect(() => {
    NfcManager.start();
    return () => {
      NfcManager.stop();
    };
  }, []);
  const startNfcListener = async () => {
    try {
      await NfcManager.requestTechnology(NfcTech.Ndef);
      NfcManager.setEventListener(NfcTech.Ndef, (tag) => {
        console.log('NFC Tag:', tag);
        setNfcData(tag);
        NfcManager.setAlertMessageIOS('NFC Tag Detected');
        NfcManager.unregisterTagEvent().catch(() => 0);
      });
      NfcManager.setAlertMessageIOS('Aproxime o NFC Tag do dispositivo.');
    } catch (ex) {
      console.warn(ex);
    }
  };
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>NFC Data: {nfcData}</Text>
      <TouchableOpacity onPress={startNfcListener} style={{ marginTop: 20 }}>
        <Text>Start NFC Reader</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

应用程序应读取 NFC 标签/卡

reactjs react-native nfc react-native-nfc-manager
1个回答
0
投票

将使用权限添加到您的 AndroidManifest.xml 中

<uses-permission android:name="android.permission.NFC" />

如果事件监听器无法正常工作,请在 NfcManager.setEventListener 之前调用此函数

NfcManager.registerTagEvent();
© www.soinside.com 2019 - 2024. All rights reserved.