如何在 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 样板，因此您可以快速开始编写代码。运行以下命令以使用 pod 安装 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 标签。

适用于 Android 的 NFC 配置

要访问 Android 设备的 NFC 硬件并正确处理 NFC 意图，我们将在文件中声明这些项目：AndroidManifest.xml

该元素确保应用程序仅显示在具有 NFC 硬件的设备的 Google Play 中：uses-feature

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

NFC元素允许访问 NFC 硬件：uses-permission

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

在 iPhone 上请求 NFC 访问

首先，您需要注册Apple Developer program；您还需要为应用程序创建一个应用程序标识，以便您可以在 iOS 设备上测试 NFC 项目。

在 Mac 上的 Xcode 中，导航到Xcode → Preferences → Accounts
单击左下角的+图标以添加您的 Apple ID
选择您的帐户。它将显示在右侧的主帐户窗口中Teamas和as(Personal Team)RoleUser

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

在选项卡中，选择您用于项目的适当团队。然后，在选项卡下，选择Capabilities或单击+号并搜索以在项目上启用 NFC 功能：Signing and capabilitiesSigning and capabilitiesNear field communication tag

请注意 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 库，然后我们将使用该方法来确定设备是否支持 NFC。iData学术文献下载网(cn-ki.net)，内容全部支持下载全文，包含人文社科领域核心期刊！在下面的代码中，我们创建了一个状态，当我们发现设备是否支持 NFC 时会更新该状态：isSupported()

import NfcManager, { NfcEvents } from 'react-native-nfc-manager';
const [hasNfc, setHasNFC ] = useState(null);
useEffect`当组件挂载时，我们将更新 Hook 中的状态。一旦我们确认设备支持 NFC，我们将继续使用以下方法初始化 NFC 模块：`start()
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();}

在上面的Hook 中，事件侦听器正在侦听一个名为. 您还可以使用设置 UI 消息的形式供用户查看。我们用于开始检测 NFC 标签的过程并取消它。useEffect()onDiscoverTagsetAlertMessages()registerTagEvent()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;}

在上面的代码中，我们通过. 在我们的例子中，它是Ndef 技术，一种数据格式。然后，我们对我们想要编写的 URL 进行编码，并使用.NfcManager.requestTechnologyNdef.encodeMessagewriteNdefMessage(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 标签。我希望您喜欢阅读，如果您有任何问题，请务必发表评论。快乐编码！