React Navigation如何配置网站URL为深链前缀实现跳转
React Native 深链配置HTTPS域名唤起能力的落地步骤
核心问题定位
自定义协议链接可正常唤起,说明你当前的React Navigation路由匹配、linking前缀配置本身没有问题。HTTPS域名链接无法唤起的本质原因是:系统层面未获得「该HTTPS域名的跳转权归属你的App」的校验许可——自定义协议是App在安装时就会在系统注册的专属处理规则,但HTTPS链接默认由浏览器处理,必须通过系统级的域名关联校验,才能让系统将对应域名下的链接直接导流到你的App,这也是Netflix、Spotify等产品实现无跳转唤起的核心机制。
安卓端必做配置(你当前测试的Android场景)
- 在安卓项目的
AndroidManifest.xml中,为承载NavigationContainer的主Activity添加带自动校验的intent-filter,主动声明对目标HTTPS域名的处理权限:<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:host="[myapp]-web.vercel.app" android:scheme="https" /> </intent-filter> - 部署系统要求的域名归属校验文件:安卓系统会自动访问你站点根路径下的
/.well-known/assetlinks.json文件,确认你对域名的所有权。因为你使用Vercel托管Next.js,只需要将符合格式要求的assetlinks.json文件放到项目的public/.well-known/目录下,部署后即可通过对应公开路径访问,无需额外写路由逻辑。文件内容需要包含你App的包名、应用签名证书的SHA256指纹数组。 - 常见踩坑规避:
- 校验文件的返回Content-Type必须为
application/json,如果返回HTML或其他格式会直接导致校验失败 - 调试阶段要确保测试包的签名SHA256和校验文件中记录的完全一致,debug签名和release签名需要分别记录
- 安卓系统一旦校验失败会缓存该结果,即使后续修正配置也需要手动在应用信息页清除应用的默认关联设置,或等待系统重新触发校验流程
- 校验文件的返回Content-Type必须为
- 测试注意:uri-scheme工具本质是模拟系统发送跳转intent,不会触发系统的域名校验逻辑,因此无法模拟真实场景下HTTPS链接的唤起效果,必须在真实的系统浏览器、社交APP内点击链接才能验证实际表现。
iOS端对应配置(全平台适配时)
- 在项目能力配置中开启Associated Domains,将你的Vercel域名以
applinks:[myapp]-web.vercel.app的格式添加到关联域名列表中 - 同样在Next.js项目的
public/.well-known/目录下部署苹果要求的apple-app-site-association校验文件,关联你的App ID和支持的路由路径,Vercel部署后即可被苹果系统正常抓取
现有React Navigation配置适配
你当前编写的linking配置无需修改:系统将HTTPS链接传递给App后,React Navigation会自动复用已配置的路由匹配规则,将/share/:localId路径映射到对应的LocalInside页面,表现和自定义协议唤起完全一致。
体验对齐补充
- 你前期配置的社交分享meta标签可以保留,当用户未安装App时,站点会正常打开展示分享内容;已安装App的用户会被系统直接唤起,跳过网页加载环节
- 可在Next.js的分享路径页面添加基础的UA判断逻辑,对老版本不支持系统级App Links的安卓设备,自动触发自定义scheme的唤起跳转,作为体验兜底
内容的提问来源于stack exchange,提问作者Nicolas S.
相关产品推荐
相关产品推荐

