如何在React Native中使用NFC标签（附代码实例）

近场通信，或称NFC，允许数据在相互靠近的设备之间传输。NFC标签是嵌入了微小芯片的贴纸或腕带，可以存储信息，并能被十厘米内的NFC阅读器读取。

有了NFC标签，你可以轻松地传输少量的信息，如应用程序的URL、加密的银行账户等。NFC最大的优势是它不需要配对或任何手动输入来建立连接。你只需轻点一下就能传输数据，这一点我们稍后会演示。在这篇文章中，我们将介绍什么是NFC标签，以及我们如何在React Native中使用它们。让我们开始吧!

NFC标签如何工作？

我们可以在需要快速交换数字化数据的应用中使用NFC标签。NFC标签包含存储存储器和一个无线电芯片。由于磁感应的原因，NFC标签没有自己的电源。相反，它们从读取它们的设备上获得电源。

基本上，当NFC阅读器被带入NFC标签10厘米范围内时，NFC标签就会通电，传输存储在其微芯片中的任何数据。当阅读器验证信息时，信息交换就完成了。NFC阅读器一次只能连接一个NFC标签，最大限度地减少了意外的交易。

NFC标签阅读器如何工作？

之前，我们提到NFC标签阅读器作为电源，从无源NFC标签中读取信息。NFC标签阅读器需要一个电源，将电流通过其线圈传递给NFC标签，从而在阅读器周围产生一个磁场。

由于法拉第感应定律，将标签带入这个磁场范围内会导致两个线圈之间的感应耦合，这时就会发生信息交换。

用React Native读取NFC标签

现在我们了解了NFC标签和NFC标签阅读器的基本知识，让我们来学习如何编写读取和写入NFC标签的React Native代码。首先，让我们用下面的命令初始化一个新的React Native项目：

npx react-native init NFCTutorial

上面的命令会在你选择的位置安装一个新的React Native模板，这样你就可以快速开始编写代码了。运行下面的命令，使用pods安装iOS的依赖项。CocoaPods是一个用于Swift等iOS编程语言的依赖管理器：

cd ios && pod install && cd ..

然后，运行npm start ，启动Metro bundler和npm ios ，在iOS模拟器上运行该项目。

在本教程中，我们将使用react-native-nfc-manager。但是，在进入代码之前，我们需要配置Android和iOS平台以启用NFC。尽管我们将对Android和iOS平台进行配置，但我们将只在iOS设备上演示读写NFC标签。

安卓的NFC配置

为了访问安卓设备的NFC硬件并正确处理NFC意图，我们将在AndroidManifest.xml 文件中声明这些项目。

uses-feature 元素确保应用程序只在拥有NFC硬件的设备上显示在Google Play上：

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

NFCuses-permission 元素允许对NFC硬件的访问：

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

在iPhone上请求NFC访问

首先，你需要在苹果开发者计划中注册；你还需要为应用程序创建一个应用身份，以便你可以在iOS设备上测试NFC项目：

• 在Mac上的Xcode中，导航到Xcode→首选项→帐户
• 点击左下角的**"+**"图标，添加您的苹果ID。
• 选择您的账户。它将显示在主账户窗口的右侧，在(Personal Team) 和Role 下，显示为Team 。User

• 从菜单栏，点击窗口→设备和模拟器 → 设备
• 用闪电电缆连接你的iPhone，并通过右边的活动方案下拉选择它作为构建目标
• 接下来，打开我们之前在Xcode上安装的项目
• 在 "常规"标签下，将捆绑标识符改为唯一标识符

在Signing and capabilities 选项卡中，选择你为该项目使用的适当的团队。然后，在Signing and capabilities 标签下，选择Capabilities或者点击**+**号，搜索Near field communication tag ，在项目上启用NFC功能：

请注意Xcode已经创建了一个名为entitlements 的文件夹，其中包含应用程序的功能：

最后，让我们编辑info.plist 文件，添加以下几行代码来描述该项目：

<key>NFCReaderUsageDescription</key>
<string>Reading NFC with react native</string>

这就是所有需要的配置!继续点击Xcode的运行按钮，这样我们就可以在连接的iPhone设备上查看该项目。现在，让我们继续写我们的代码!

如何用React Native读取NFC标签

首先，让我们安装react-native-nfc-manager库：

npm i --save react-native-nfc-manager

记得再次运行cd ios && pod install 。

检查当前设备是否有NFC支持

我们需要导入 react-native-nfc-manager 库，然后使用isSupported() 方法来确定设备是否有 NFC 支持。在下面的代码中，我们创建了一个状态，当我们发现设备是否支持NFC时，这个状态将被更新：

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

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

当组件安装时，我们将在useEffect Hook中更新该状态。一旦我们确认设备支持NFC，我们将继续用start() 方法初始化NFC模块：

useEffect(() => {
    const checkIsSupported = async () => {
      const deviceIsSupported = await NfcManager.isSupported()

      setHasNFC(deviceIsSupported)
      if (deviceIsSupported) {
        await NfcManager.start()
      }
    }

    checkIsSupported()
  }, [])

现在，让我们来编写读取NFC标签的代码：

useEffect(() => {
    NfcManager.setEventListener(NfcEvents.DiscoverTag, (tag) => {
      console.log('tag found')
    })

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


  const readTag = async () => {
    await NfcManager.registerTagEvent();
  }

在上面的useEffect() Hook中，事件监听器正在监听一个叫做onDiscoverTag 的事件。你也可以使用setAlertMessages() ，为用户设置一种形式的UI信息。我们用registerTagEvent() 开始检测NFC标签的过程，用unregisterTagEvent() 来取消这个过程。

如果设备支持NFC，我们将有条件地渲染一个按钮，如果不支持，我们将渲染一条信息。下面的代码是按钮的代码，当点击时将调用readTag() ：

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.btnCancel]} onPress={cancelReadTag}>
        <Text style={{ color: "white" }}>Cancel Scan</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );

下面的图片显示了该项目在一个不支持NFC扫描的模拟器上的情况：

下面的截图显示了该项目在物理设备上的样子：

当你点击扫描标签按钮时，就像下面的图片，设备将准备好读取NFC标签：

如何编写NFC标签

到目前为止，我们已经确定了如何检查一个设备是否支持NFC标签，并且我们已经学会了如何读取NFC标签来访问其中存储的信息。现在，我们将学习如何将信息编码到NFC标签中，以便当阅读器读取它时，他们将访问我们写入标签的信息。作为一个例子，我们将对LogRocket URL进行编码：

const writeNFC = async() => {
    let result = false;

    try {
      await NfcManager.requestTechnology(NfcTech.Ndef);

      const bytes = Ndef.encodeMessage([Ndef.uriRecord('https://blog.logrocket.com/')]);

      if (bytes) {
        await NfcManager.ndefHandler
          .writeNdefMessage(bytes);
        result = true;
      }
    } catch (ex) {
      console.warn(ex);
    } finally {
      NfcManager.cancelTechnologyRequest();
    }

    return result;
  }

在上面的代码中，我们通过NfcManager.requestTechnology ，请求使用一种特定的NFC技术。在我们的案例中，它是Ndef技术，一种数据格式。然后，我们用Ndef.encodeMessage 编码我们要写的URL，并使用writeNdefMessage(bytes) 。

现在，我们将创建一个按钮，当用户想把LogRocket博客的URL写到NFC标签上时，就会调用这个函数。

<TouchableOpacity style={[styles.btn, styles.btnWrite]} onPress={writeNFC}>
        <Text style={{ color: "white" }}>Write Tag</Text>
 </TouchableOpacity>

因此，当按钮被点击时，NFC抽屉已经准备好将LogRocket URL编码到NFC标签上：

结论

NFC技术被用于我们日常生活的许多方面，包括非接触式支付、音乐会上的门票兑换和会场位置登记等，仅此而已。

在这篇文章中，我们探讨了如何读写NFC标签，对其进行编码或访问信息。我们使用React Native和iOS构建了一个示例应用程序，以轻松传输一个URL，但是，你可以在本教程中的信息基础上，在你自己的项目中实现NFC标签。我希望你喜欢阅读，如果你有任何问题，请务必留下评论。编码愉快!