React Native中如何修复'Unsupported tag api'错误？

错误根源 #

1. 手机作为NFC对等设备时，无法通过NfcTech.Ndef执行写入操作，该技术仅适用于实体NFC标签。
2. 代码重复调用NfcManager.start()，导致NFC服务状态异常。
3. URI记录使用单引号包裹模板字符串，无法解析变量，且未遵循标准URI协议格式。

修复方案 #

• 替换NFC技术类型：Android设备间传输时使用NfcTech.NdefAndroid，该技术支持手机模拟NFC标签。
• 清理重复初始化：仅在NFC支持检查通过后启动一次NfcManager。
• 修正URI格式：用反引号包裹模板字符串，本地文件路径添加file://前缀。
• 统一事件管理：合并NFC监听逻辑，避免重复注册事件。

修正后的代码 #

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

function App() {
  const [hasNfc, setHasNFC] = useState(null);

  useEffect(() => {
    const checkIsSupported = async () => {
      const deviceIsSupported = await NfcManager.isSupported();
      setHasNFC(deviceIsSupported);
      if (deviceIsSupported) {
        await NfcManager.start();
        // 注册标签发现事件
        const handleTagDiscovered = async (tag) => {
          console.log('tag found', tag);
        };
        NfcManager.setEventListener(NfcEvents.DiscoverTag, handleTagDiscovered);

        return () => {
          NfcManager.setEventListener(NfcEvents.DiscoverTag, null);
          NfcManager.stop();
        };
      }
    };

    checkIsSupported();
  }, []);


  const readTag = async () => {
    try {
      await NfcManager.registerTagEvent();
    } catch (ex) {
      console.warn(ex);
    }
  };

  const writeNFC = async () => {
    try {
      // 针对Android设备间传输，使用NdefAndroid技术
      await NfcManager.requestTechnology(NfcTech.NdefAndroid);
      // 修正URI格式，添加file://协议前缀，用反引号解析模板字符串
      const uri = `file://${workspaceFolder}/Appli_NFC_TPE/citroen ami.png`;
      const bytes = Ndef.encodeMessage([Ndef.uriRecord(uri)]);

      if (bytes) {
        await NfcManager.ndefHandler.writeNdefMessage(bytes);
        console.log('写入成功');
      }
    } catch (ex) {
      console.warn(ex);
    } finally {
      NfcManager.cancelTechnologyRequest();
    }
  };

  if (hasNfc === null) {
    return null;
  }

  if (!hasNfc) {
    return (
      <View style={styles.sectionContainer}>
        <Text>NFC not supported</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.sectionContainer}>
      <Text>Hello world</Text>
      <TouchableOpacity style={[styles.btn, styles.btnScan]} onPress={readTag}>
        <Text style={{ color: "white" }}>Scan Tag</Text>
      </TouchableOpacity>
      <TouchableOpacity style={[styles.btn, styles.btnWrite]} onPress={writeNFC}>
        <Text style={{ color: "white" }}>Write Tag</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    marginVertical: 10,
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  btnScan: {
    backgroundColor: 'blue',
  },
  btnWrite: {
    backgroundColor: 'green',
  },
});

export default App;

内容的提问来源于stack exchange，提问作者Boom Titou Clash