链接到你的应用

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

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

¥This guide provides steps to configure standard deep links in your project by adding a custom scheme.

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

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

¥Add a custom scheme in app config

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

¥To provide a link to your app, add a custom string to the scheme property in the app config:

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

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

¥After adding a custom scheme to your app, you need to create a new development build. Once the app is installed on a device, you can open links within your app using myapp://.

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

¥If the custom scheme is not defined, the app will use android.package and ios.bundleIdentifier as the default schemes in both development and production builds. This is because Expo Prebuild automatically adds these properties as custom schemes for Android and iOS.

测试更新

¥Test the deep link

你可以使用 npx uri-scheme 测试打开应用的链接，npx uri-scheme 是一个用于交互和测试 URI 方案的命令行实用程序。

¥You can test a link that opens your app using npx uri-scheme, which is a command-line utility for interacting and testing URI schemes.

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

¥For example, if your app has a /details screen that you want to open when a user taps on a link (either through another app or a web browser), you can test this behavior by running the following command:

运行上述命令：

¥Running the above command:

• 打开你应用的 /details 屏幕

  ¥Opens your app's /details screen

• android 或 ios 选项指定应在 Android 或 iOS 上打开链接

  ¥The android or ios options specify that the link should be opened on Android or iOS

• 或者，你可以尝试通过在设备的 Web 浏览器中单击 <a href="scheme://">Click me</a> 之类的链接来打开链接。请注意，在地址栏中输入链接可能无法按预期工作，你可以使用 通用链接 来实现该功能。

  ¥Alternatively, you can try opening the link by clicking a link like <a href="scheme://">Click me</a> in the device's web browser. Note that entering the link in the address bar may not work as expected, and you can use universal linking to implement that ability.

处理 URL

¥Handle URLs

如果你使用的是 Expo 路由，则可以忽略此部分。

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

¥You can observe links that launch your app using the Linking.useURL() hook from expo-linking.

import * as Linking from 'expo-linking';

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

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

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

¥The Linking.useURL() hook works behind the scenes by following these imperative methods:

• 启动应用的链接最初使用 Linking.getInitialURL() 返回

  ¥The link that launched the app is initially returned using Linking.getInitialURL()

• 在应用已打开时触发的任何新链接都可以通过 Linking.addEventListener('url', callback) 观察到

  ¥Any new links triggered while the app is already open are observed with Linking.addEventListener('url', callback)

解析 URL

¥Parse URLs

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

¥You can use the Linking.parse() method to parse the path, hostname, and query parameters from a URL. This method extracts deep linking information and considers nonstandard implementations.

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%%Your React component here. %%placeholder-end%%
  )
}

局限性

¥Limitations

如果用户未安装你的应用，则指向你应用的深层链接将不起作用。分支 等归因服务提供有条件链接到你的应用或网页的解决方案。

¥If a user does not have your app installed, deep links to your app will not work. Attribution services like Branch offer solutions for conditionally linking to your app or web page.

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

¥Android App/iOS Universal Links is another solution you can use to handle such cases. This type of linking allows your app to open when a user clicks follows an HTTP(S) link pointing to your web domain. If the user doesn't have your app installed, the link takes them to your website. For more details, see universal linking.