将链接引入您的应用

了解如何通过创建深度链接在您的 React Native 和 Expo 应用中处理传入的 URL。

本指南提供通过添加自定义方案在您的项目中配置标准 深度链接 的步骤。

对于大多数应用，您可能希望设置 Android 应用/iOS 通用链接，而不是本指南中描述的深度链接，或者同时设置两者。

在应用配置中添加自定义方案

要提供链接到您的应用，需在 应用配置 中向 scheme 属性添加自定义字符串：

{
  "expo": {
    "scheme": "myapp"
  }
}

在您的应用中添加自定义方案后，您需要 创建新的开发构建。一旦应用安装在设备上，您可以使用 myapp:// 在您的应用中打开链接。

如果 未定义自定义方案，则应用将在开发和生产构建中使用 android.package 和 ios.bundleIdentifier 作为默认方案。这是因为 Expo Prebuild 会自动将这些属性添加为 Android 和 iOS 的自定义方案。

测试深度链接

您可以使用 npx uri-scheme 测试打开您应用的链接，它是一个用于交互和测试 URI 方案的命令行工具。

例如，如果您的应用有一个 /details 屏幕，您希望在用户点击链接时打开（无论是通过另一个应用还是网页浏览器），您可以通过运行以下命令来测试此行为：

运行上述命令：

• 打开您应用的 /details 屏幕
• android 或 ios 选项指定链接应在 Android 或 iOS 上打开
• 或者，您可以尝试通过点击设备网页浏览器中的链接，例如 <a href="scheme://">点击我</a> 打开链接。请注意，在地址栏中输入链接可能无法按预期工作，您可以使用 通用链接 来实现此功能。

处理 URLs

如果您使用 Expo Router，您可以忽略此部分。

您可以使用 Linking.useURL() 钩子观察启动您应用的链接，来源于 expo-linking。

import * as Linking from 'expo-linking';

export default function Home() {
  const url = Linking.useURL();

  return <Text>URL: {url}</Text>;
}

Linking.useURL() 钩子通过以下命令性方法在后台工作：

• 启动应用的链接最初使用 Linking.getInitialURL() 返回
• 应用已经打开时触发的任何新链接都由 Linking.addEventListener('url', callback) 观察

解析 URLs

您可以使用 Linking.parse() 方法从 URL 中解析 路径、主机名和 查询参数。该方法提取深度链接信息并考虑非标准实现。

import * as Linking from 'expo-linking';

export default function Home() {
  const url = Linking.useURL();

  if (url) {
    const { hostname, path, queryParams } = Linking.parse(url);

    console.log(
      `Linked to app with hostname: ${hostname}, path: ${path} and data: ${JSON.stringify(
        queryParams
      )}`
    );
  }

  return (
    %%placeholder-start%%您的 React 组件在这里。 %%placeholder-end%%
  )
}

限制

如果用户没有安装您的应用，深度链接将无法工作。像 Branch 这样的归因服务提供条件性链接到您的应用或网页的解决方案。

Android 应用/iOS 通用链接是您可以用来处理这种情况的另一种解决方案。这种链接方式允许您的应用在用户点击指向您网站域的 HTTP(S) 链接时打开。如果用户没有安装您的应用，链接将带他们到您的网站。有关更多详细信息，请参见 通用链接。