React Native+Next.js深度链接报错：scheme无注册处理器如何解决？

1. 先确认React Native端的Scheme注册是否正确 #

这个错误的核心是浏览器识别不到example://对应的应用处理程序，首先要确保RN应用已经正确注册了该scheme：

• iOS端：打开Info.plist，检查是否包含CFBundleURLSchemes数组，并且其中有example这个值。示例配置：

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>example</string>
      </array>
    </dict>
  </array>
  

• Android端：打开AndroidManifest.xml，找到处理Deep Link的Activity（通常是MainActivity），检查是否添加了包含example scheme的intent-filter：

  <activity
    android:name=".MainActivity"
    ...>
    <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="example" />
    </intent-filter>
  </activity>
  

  配置完成后，重新打包安装应用到测试设备上。

2. Next.js网站端的正确唤起方式 #

不要用router.push()（它只适合Next.js内部路由），window.location.replace()也会被浏览器的安全策略限制，推荐以下两种方式：

• 直接使用a标签：这是浏览器支持最好的方式，示例代码：

  <a href="example://" target="_blank" rel="noopener noreferrer">
    打开应用
  </a>
  

• JS触发（带失败降级）：如果需要逻辑判断后唤起，创建a标签模拟点击，并添加超时降级（比如跳转到应用商店）：

  const handleOpenApp = () => {
    const linkEl = document.createElement('a');
    linkEl.href = 'example://';
    linkEl.target = '_blank';
    document.body.appendChild(linkEl);
    linkEl.click();
    document.body.removeChild(linkEl);
  
    // 1秒后如果没唤起应用，跳转到应用商店
    setTimeout(() => {
      window.location.href = 'https://link-to-your-app-store-page';
    }, 1000);
  };
  

3. 规避浏览器安全限制 #

• 必须通过用户主动交互触发唤起（比如按钮点击），浏览器会拦截自动执行的scheme跳转（比如页面加载时自动调用）。
• 避免在iframe中触发唤起：部分浏览器会阻止iframe内的自定义scheme跳转，确保按钮在主文档中。
• HTTPS环境注意：如果网站是HTTPS，浏览器对自定义scheme的校验更严格，确保scheme没有被标记为恶意，且应用已正确安装在设备上。

4. 调试验证步骤 #

• 直接在设备浏览器地址栏输入example://，如果能唤起应用，说明RN端配置没问题，问题出在网站端的触发方式。
• 在RN应用内调用Linking.openURL('example://')测试，验证应用自身能识别该scheme。
• 查看浏览器控制台的完整错误信息，是否有额外的拦截提示（比如跨域、安全策略限制）。

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