如何通过邮件、WhatsApp等外部应用打开React Native深度链接？

核心问题分析 #

你使用的www.myuchat.com/profile/:username属于Web域名链接，而此前配置的是自定义scheme（mychat://），两者分属不同的深度链接类型。外部应用（如WhatsApp、邮件）中的Web链接默认会打开浏览器，需配置应用链接（Android App Links）或通用链接（iOS Universal Links），才能让系统直接唤起你的App而非浏览器。

具体解决步骤 #

1. 统一导航链接配置 #

在React Navigation的深度链接配置中，同时兼容自定义scheme和Web域名前缀，确保两种链接都能被识别：

// 导航配置示例
const linking = {
  prefixes: [
    'mychat://', // 自定义scheme
    'https://www.myuchat.com' // Web域名前缀
  ],
  config: {
    screens: {
      Profile: 'profile/:username'
    }
  }
};

2. Android端：配置App Links #

在/android/app/src/main/AndroidManifest.xml中，为MainActivity添加App Links的intent-filter，并开启自动验证：

<activity
  android:name=".MainActivity"
  ...>
  <!-- 原有自定义scheme的intent-filter -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="mychat" />
  </intent-filter>

  <!-- 新增App Links的intent-filter -->
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
      android:scheme="https"
      android:host="www.myuchat.com"
      android:pathPrefix="/profile" />
  </intent-filter>
</activity>

同时，在你的Web服务器根目录下的.well-known文件夹中放置assetlinks.json文件，用于验证域名归属：

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.yourapppackage", // 替换为你的App包名
      "sha256_cert_fingerprints": ["你的App签名SHA256指纹"] // 替换为实际指纹
    }
  }
]

SHA256指纹可通过Android Studio的Build > Generate Signed Bundle/APK选项查看，或使用keytool命令生成。

3. iOS端：配置Universal Links #

在ios/[你的App名称]/Info.plist中添加关联域配置：

<key>NSUserActivityTypes</key>
<array>
  <string>NSUserActivityTypeBrowsingWeb</string>
</array>
<key>associatedDomains</key>
<array>
  <string>applinks:www.myuchat.com</string>
</array>

然后在Web服务器的.well-known文件夹中放置apple-app-site-association文件：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "你的TeamID.com.yourapppackage", // 替换为TeamID+Bundle ID
        "paths": ["/profile/*"]
      }
    ]
  }
}

TeamID可在Apple开发者后台查看，appID格式为「TeamID + 你的App Bundle ID」。

4. 分享链接的正确使用 #

分享时优先使用Web域名链接（如https://www.myuchat.com/profile/john）：

• 未安装App的用户会打开对应Web页面（若已开发Web版）
• 已安装App的用户会直接唤起App并跳转到指定页面
  若需使用自定义scheme链接，部分应用可能屏蔽非HTTP/HTTPS链接，可通过中间Web页跳转——检测到App已安装则唤起，否则引导用户下载。

5. 测试方法 #

• Android：使用adb命令测试

  adb shell am start -W -a android.intent.action.VIEW -d "https://www.myuchat.com/profile/john" com.yourapppackage
  

• iOS：在系统备忘录中输入链接并点击测试，或在Xcode模拟器的Safari中打开链接
• 第三方应用：在WhatsApp中发送链接给自己，点击验证唤起效果

常见排查点 #

• 确认Web服务器上的验证文件（assetlinks.json/apple-app-site-association）可正常访问（无404，Content-Type配置正确）
• 检查App签名信息与验证文件中的指纹/TeamID完全匹配
• 确保React Navigation的linking配置中，screens与path的映射关系正确
• Android 12+需确认intent-filter的android:autoVerify="true"已添加且配置无误

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