点击邮件内按钮而非链接时如何唤起React Native应用

问题根因 #

绝大多数主流邮件服务商会对邮件内的按钮跳转逻辑做安全限制：如果按钮是通过JavaScript、form表单提交实现跳转，或者链接经过了邮件服务商的中转重定向，会直接阻断deep link、universal link的唤起逻辑，导致只能打开网页，不会唤起应用。

修复步骤 #

1. 调整邮件按钮的HTML实现 #

• 禁止用JS跳转、form提交实现按钮点击，必须用原生<a>标签包裹按钮样式元素，href属性直接填写你的应用关联的universal link/deep link地址，不要经过任何中间跳转页
• 不要给<a>标签加rel="noreferrer"等额外安全限制属性，发信时给链接加白名单标记，避免邮件服务商自动给链接加中转层

2. 完善域名侧的关联配置 #

• 确保你的universal link对应域名的.well-known目录下，已经正确放置了苹果的apple-app-site-association文件和安卓的assetlinks.json文件，两个文件不能有访问重定向，content-type必须设置为application/json
• 如果需要兼容未安装应用的用户，可以在按钮跳转的网页落地页加自动唤起逻辑，示例代码如下：

// 网页落地页加载后自动执行唤起逻辑
window.addEventListener('load', () => {
  // 优先尝试用universal link唤起应用
  window.location.href = "你的应用universal link完整地址";
  // 2秒后未唤起则跳转到应用商店或保留当前网页
  setTimeout(() => {
    window.location.href = "对应平台应用商店地址/网页功能页地址";
  }, 2000);
});

3. 双端唤起配置校验 #

• 安卓端：检查AndroidManifest.xml中对应接收deep link的Activity，已添加android:autoVerify="true"属性
• iOS端：检查Xcode中Associated Domains配置项已正确添加你的域名，格式为applinks:你的域名

测试注意事项 #

请使用真机的主流邮件客户端（Gmail、Outlook、系统自带邮件等）测试，不要使用模拟器邮件客户端，避免模拟器兼容性问题导致测试结果不准确。

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