无法检测NFC标签：React Native开发Android NFC转账遇类型错误求助

我想通过NFC在两台Android设备间实现转账功能，但运行以下React Native代码检测NFC标签时，触发错误：TypeError: Cannot convert null value to object。

代码如下：

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

// Pre-step, call this before any NFC operations
NfcManager.start();

const LoginScreen = () => {
  async function readNdef() {
    try {
      // register for the NFC tag with NDEF in it
      await NfcManager.requestTechnology(NfcTech.Ndef);
      // the resolved tag object will contain `ndefMessage` property
      const tag = await NfcManager.getTag();
      if (tag) {
        console.warn('Tag found', tag);
      } else {
        console.warn('No tag found');
      }
    } catch (ex) {
      console.warn('Oops!', ex);
    } finally {
      // stop the nfc scanning
      NfcManager.cancelTechnologyRequest();
    }
  }

  return (
    <View style={styles.wrapper}>
      <TouchableOpacity onPress={readNdef}>
        <Text>Scan a Tag</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {  
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default LoginScreen;

1. 调整NFC初始化时机 #

直接在组件外部调用NfcManager.start()会导致原生模块未完成初始化，后续操作返回null引发错误。将初始化逻辑移至组件的useEffect钩子中：

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

const LoginScreen = () => {
  useEffect(() => {
    const initNfc = async () => {
      await NfcManager.start();
      // 可选：提前检测设备NFC支持情况
      const isSupported = await NfcManager.isSupported();
      if (!isSupported) {
        console.warn('当前设备不支持NFC');
      }
    };

    initNfc();

    // 组件卸载时清理NFC资源
    return () => {
      NfcManager.stop();
    };
  }, []);

  // ... 原readNdef函数
}

// ... 样式和导出部分

2. 严格校验tag返回值 #

TypeError的核心原因是NfcManager.getTag()返回null，后续代码尝试将其作为对象处理。增加类型校验避免错误：

async function readNdef() {
  try {
    await NfcManager.requestTechnology(NfcTech.Ndef);
    const tag = await NfcManager.getTag();
    
    if (tag && typeof tag === 'object') {
      console.warn('Tag found', tag);
      // 处理NFC标签数据
    } else {
      console.warn('未读取到有效标签数据');
    }
  } catch (ex) {
    console.warn('扫描出错:', ex);
  } finally {
    NfcManager.cancelTechnologyRequest();
  }
}

3. 确认Android权限配置 #

检查AndroidManifest.xml是否添加了NFC相关权限：

<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc" android:required="true" />

Android 10+设备可在运行时显式请求NFC权限，避免权限不足导致的异常。

4. 适配设备间NFC转账场景 #

普通NDEF读取仅适用于实体标签，两台Android设备互传需使用Android Beam或HCE技术：

• 发起方通过NfcManager.writeNdefMessage()发送转账数据
• 接收方注册监听事件接收数据

示例接收方监听逻辑：

useEffect(() => {
  let nfcListener;
  const setupNfcListener = async () => {
    await NfcManager.start();
    nfcListener = NfcManager.addListener('NfcDiscoverTag', (tag) => {
      console.warn('接收到设备NFC数据:', tag);
      // 解析数据并执行转账逻辑
    });
  };

  setupNfcListener();

  return () => {
    nfcListener?.remove();
    NfcManager.stop();
  };
}, []);

内容的提问来源于stack exchange，提问作者Venkat Naikeen