链接到你的应用

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

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

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

在应用配置中添加自定义 scheme

要为你的应用提供链接，请在 app config 中的 scheme 属性里添加一个自定义字符串。

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

为应用添加自定义 scheme 后，你需要 创建一个新的开发构建。应用安装到设备后，你就可以使用 myapp:// 在应用内打开链接。

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

测试深度链接

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

例如，如果你的应用有一个 /details 页面，并且你希望用户点击链接时打开它（无论是通过其他应用还是网页浏览器），你可以通过运行以下命令来测试这种行为：

运行上述命令将会：

• 打开你应用的 /details 页面
• android 或 ios 选项指定链接应在 Android 或 iOS 上打开
• 或者，你也可以尝试在设备的网页浏览器中点击类似 <a href="scheme://">Click me</a> 的链接来打开它。请注意，在地址栏中输入该链接可能不会按预期工作，你可以使用 universal linking 来实现该能力。

处理 URL

如果你正在使用 Expo Router，可以忽略本节。

你可以使用 expo-linking 中的 Linking.useURL() hook 来观察启动你应用的链接。

import * as Linking from 'expo-linking';

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

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

Linking.useURL() hook 的底层工作方式是通过以下命令式方法实现的：

• 启动应用的链接最初会通过 Linking.getInitialURL() 返回
• 应用已经打开时触发的任何新链接都会通过 Linking.addEventListener('url', callback) 进行监听

解析 URL

你可以使用 Linking.parse() 方法从 URL 中解析 path、hostname 和 query parameters。该方法会提取深度链接信息，并考虑非标准实现。

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 App/iOS Universal Links 也是一种可用于处理此类情况的解决方案。这种链接类型允许当用户点击指向你网站域名的 HTTP(S) 链接时打开你的应用。如果用户没有安装你的应用，该链接会将其带到你的网站。有关更多详情，请参阅 universal linking。