iOS读取含关联域名的NFC标签时无法唤起React Native应用

一、先排查唤起不生效的核心问题 #

1. 验证apple-app-site-association的响应头 #

服务器返回该文件时，必须设置Content-Type: application/json，这是很多人忽略的配置细节。用curl命令快速验证：

curl -I https://example.com/apple-app-site-association

检查返回的Content-Type字段，确保是application/json，而非text/plain或text/html。

2. NFC标签的URI格式要求 #

iOS App Links默认只识别HTTPS协议的URL，你当前标签用的是http://example.com，需要改成https://example.com。同时要确保NDEF标签的URI记录符合标准格式，使用NDEF规定的URI前缀（比如https://对应前缀代码0x04），避免格式错误导致系统无法识别。

3. 开发模式的信任配置 #

你在关联域中添加了?mode=developer，需确保测试设备已信任开发者证书：

• 打开设备「设置」→「通用」→「VPN与设备管理」
• 找到你的开发者账号，点击「信任」

二、React Native端必须实现的唤起处理逻辑 #

要让应用被唤起后正确处理URL，需同时配置原生端和RN端代码：

1. iOS原生端配置（AppDelegate） #

Objective-C 版本

修改AppDelegate.m，添加URL跳转处理代码：

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [RCTLinkingManager application:app openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}

Swift 版本

修改AppDelegate.swift：

import React

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  return RCTLinkingManager.application(app, open: url, options: options)
}

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
  return RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
}

2. React Native端监听URL唤起 #

用Linking模块监听应用唤起事件，处理传入的URL：

import { Linking, useEffect } from 'react-native';

useEffect(() => {
  // 监听应用被URL唤起的热启动事件
  const handleOpenURL = (event) => {
    const { url } = event;
    // 在这里添加业务逻辑，比如解析URL中的NFC相关参数
    console.log('应用被唤起，URL:', url);
  };

  Linking.addEventListener('url', handleOpenURL);

  // 检查应用是否是被URL冷启动的
  const checkInitialURL = async () => {
    const initialURL = await Linking.getInitialURL();
    if (initialURL) {
      handleOpenURL({ url: initialURL });
    }
  };

  checkInitialURL();

  // 清理监听
  return () => {
    Linking.removeEventListener('url', handleOpenURL);
  };
}, []);

三、如果需要主动读取NFC标签数据 #

如果标签包含额外NDEF数据，或需要在应用内主动读取标签，可使用react-native-nfc-manager库：

1. 安装与配置 #

npm install react-native-nfc-manager --save

在iOS的Info.plist中添加NFC权限：

<key>NFCReaderUsageDescription</key>
<string>需要读取NFC标签数据</string>
<key>com.apple.developer.nfc.readersession.formats</key>
<array>
  <string>NDEF</string>
</array>

2. 读取标签的代码示例 #

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

useEffect(() => {
  // 初始化NFC管理器
  NfcManager.start();
  return () => {
    NfcManager.stop();
  };
}, []);

const readNdefTag = async () => {
  try {
    // 请求NFC权限
    await NfcManager.requestTechnology(NfcTech.Ndef);
    // 获取标签数据
    const tag = await NfcManager.getTag();
    console.log('读取到的NFC标签:', tag);

    // 解析NDEF记录
    if (tag.ndefMessage) {
      tag.ndefMessage.forEach(record => {
        if (record.type === 'U') {
          // 解析URI类型的记录
          const uri = NfcManager.parseUriRecord(record.payload);
          console.log('标签中的URI:', uri);
        }
      });
    }
  } catch (error) {
    console.warn('读取NFC标签失败:', error);
  } finally {
    // 释放NFC资源
    NfcManager.cancelTechnologyRequest();
  }
};

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