链接到你的应用

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

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

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

信息 对于大多数应用，你可能希望设置 Android 应用/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 Prebuild 会自动将这些属性添加为 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 测试打开你应用的链接，它是一个用于交互和测试 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 屏幕，并且你希望在用户点击链接时（无论是通过其他应用还是网页浏览器）打开该屏幕，你可以通过运行以下命令来测试此行为：

🌐 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 屏幕
• android 或 ios 选项指定链接应在 Android 或 iOS 上打开
• 或者，你可以尝试通过在设备的网络浏览器中点击类似 <a href="scheme://">Click me</a> 的链接来打开该链接。注意，在地址栏中输入链接可能无法如预期一样工作，你可以使用 通用链接 来实现该功能。

处理网址

🌐 Handle URLs

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

你可以使用 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() 返回的
• 当应用已经打开时触发的任何新链接都会通过 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

如果用户没有安装你的应用，指向你的应用的深度链接将无法使用。像 Branch 这样的归因服务提供了有条件地链接到你的应用或网页的解决方案。

🌐 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 应用/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.