链接到其他应用

了解如何根据另一个应用的 URL 方案处理和打开应用中的 URL。

从你的应用处理链接到其他应用是通过使用目标应用的 URL 来实现的。你可以使用两种方法从你的应用打开此类 URL：

🌐 Handling linking into other apps from your app is achieved by using the target app's URL. There are two methods you can use to open such URLs from your app:

• 使用 expo-linking API
• 使用 Expo Router 的 Link 组件

使用旧版 FileSystem API

🌐 Using expo-linking API

expo-linking API 提供了对原生链接 API（例如网页上的 window.history）的通用抽象，并为你的应用与其他已安装的应用交互提供了实用工具。

🌐 The expo-linking API provides a universal abstraction over native linking APIs (such as window.history on the web) and offers utilities for your app to interact with other installed apps.

下面的示例使用 Linking.openURL 在操作系统的默认浏览器中打开 常用 URL 方案 ：

🌐 The example below opens at the common URL scheme in the default browser of the operating system using Linking.openURL:

import { Button, View, StyleSheet } from 'react-native';
import * as Linking from 'expo-linking';

export default function Home() {
  return (
    <View style={styles.container}>
      <Button title="打开网址" onPress={() => Linking.openURL('https://expo.dev/')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

使用 Expo Router 的 Link 组件

🌐 Using Expo Router's Link component

如果你的项目使用 Expo Router，请使用 Link 组件来打开 URL。它在原生平台上封装了一个 <Text> 组件，在网页上封装了一个 <a> 元素。同时，它还使用 expo-linking API 来处理 URL 方案。

🌐 If your project uses Expo Router, use the Link component to open a URL. It wraps a <Text> component on native platforms and an <a> element on the web. It also uses the expo-linking API to handle URL schemes.

下面的示例在操作系统的默认浏览器中打开一个常用的 URL 方案（HTTPS）:

🌐 The example below opens a common URL scheme (HTTPS) in the default browser of the operating system:

import { Button, View, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function Home() {
  return (
    <View style={styles.container}>
      <Link href="https://expo.dev">Open a URL</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

常见 URL 方案

🌐 Common URL schemes

所有平台都有提供访问核心功能的内置 URL 方案。以下是常用方案的列表：

🌐 There are built-in URL schemes that provide access to core functionality on all platforms. Here is a list of commonly-used schemes:

import { withAndroidManifest, ConfigPlugin } from 'expo/config-plugins';

const withAndroidQueries: ConfigPlugin = config => {
  return withAndroidManifest(config, config => {
    config.modResults.manifest.queries = [
      {
        intent: [
          {
            action: [{ $: { 'android:name': 'android.intent.action.SENDTO' } }],
            data: [{ $: { 'android:scheme': 'mailto' } }],
          },
          {
            action: [{ $: { 'android:name': 'android.intent.action.DIAL' } }],
          },
        ],
      },
    ];

    return config;
  });
};

module.exports = withAndroidQueries;

{
  "expo": {
    "plugins": [
      "./my-plugin.ts"
      %%placeholder-start%%... %%placeholder-end%%
    ]
  }
}

自定义 URL 方案

🌐 Custom URL schemes

如果你知道想要打开的应用的自定义方案，你可以使用以下任意一种方法链接到它：使用 expo-linking API 或 从 Expo Router 使用 Link。

一些服务提供有关如何使用其应用自定义 URL 方案的文档。例如，Uber 的深度链接文档描述了如何直接链接到特定的上车地点和目的地：

🌐 Some services provide documentation on how to use their app's custom URL schemes. For example, Uber's deep linking documentation describes how to link directly to a specific pickup location and destination:

uber://?client_id=<CLIENT_ID>&action=setPickup&pickup[latitude]=37.775818&pickup[longitude]=-122.418028&pickup[nickname]=UberHQ&pickup[formatted_address]=1455%20Market%20St%2C%20San%20Francisco%2C%20CA%2094103&dropoff[latitude]=37.802374&dropoff[longitude]=-122.405818&dropoff[nickname]=Coit%20Tower&dropoff[formatted_address]=1%20Telegraph%20Hill%20Blvd%2C%20San%20Francisco%2C%20CA%2094133&product_id=a1111c8c-c720-46c3-8534-2fcdd730040d&link_text=View%20team%20roster&partner_deeplink=partner%3A%2F%2Fteam%2F9383

在上面的示例中，如果用户的设备上没有安装 Uber 应用，你的应用可以引导他们前往 Google Play 商店或 Apple App Store 安装。我们建议使用 react-native-app-link 库来处理这些情景。

🌐 In the example above, if the user does not have the Uber app installed on their device, your app can direct them to the Google Play Store or Apple App Store to install it. We recommend using the react-native-app-link library to handle these scenarios.

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": ["uber"]
      }
    }
  }
}

创建网址

🌐 Create URLs

你可以使用 Linking.createURL 来创建一个 URL，该 URL 可用于打开或重定向回你的应用。此方法解析为以下内容：

🌐 You can use Linking.createURL to create a URL that can be used to open or redirect back to your app. This method resolves to the following:

• 生产和开发版本：myapp://，其中 myapp 是应用配置中定义的 自定义方案
• 在 Expo Go 中开发：exp://127.0.0.1:8081

使用 Linking.createURL 可以帮助你避免硬编码 URL。你可以通过向此方法传递可选参数来修改返回的 URL。

🌐 Using Linking.createURL helps you avoid hardcoding URLs. You can modify the returned URL by passing optional parameters to this method.

要向你的应用传递数据，你可以将其作为路径或查询字符串附加到 URL 上。Linking.createURL 会自动构建一个可用的 URL。例如：

🌐 To pass data to your app, you can append it as a path or query string to the URL. Linking.createURL will construct a working URL automatically. For example:

const redirectUrl = Linking.createURL('path/into/app', {
  queryParams: { hello: 'world' },
});

这将根据环境解析为以下情况：

🌐 This will resolve into the following, depending on the environment:

• 生产和开发构建：myapp://path/into/app?hello=world
• 在 Expo Go 中开发：exp://127.0.0.1:8081/--/path/into/app?hello=world

应用内浏览器

🌐 In-app browsers

expo-linking API 允许你使用操作系统默认的网页浏览器应用打开 URL。你可以使用 expo-web-browser 库在应用内浏览器中打开 URL。例如，应用内浏览器在安全的 身份验证 中非常有用。

🌐 The expo-linking API allows you to open a URL using the operating system's default web browser app. You can use the expo-web-browser library to open URLs in an in-app browser. For example, an in-app browser is useful for secure authentication.

import { Button, View, StyleSheet } from 'react-native';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';

export default function Home() {
  return (
    <View style={styles.container}>
      <Button
        title="使用系统浏览器打开网址"
        onPress={() => Linking.openURL('https://expo.dev')}
        style={styles.button}
      />
      <Button
        title="在应用内浏览器中打开网址"
        onPress={() => WebBrowser.openBrowserAsync('https://expo.dev')}
        style={styles.button}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginVertical: 10,
  },
});

网页端的附加链接功能

🌐 Additional link functionality on web

为了在网页上提供额外的链接功能，例如右键复制或悬停预览，你可以使用 expo-router 库中的 Link 组件。

🌐 To provide additional link functionality on the web, such as right-click to copy or hover to preview, you can use a Link component from the expo-router library.

import { Link } from 'expo-router';

export default function Home() {
  return <Link href="https://expo.dev">Go to Expo</Link>;
}

或者，你可以使用 @expo/html-elements 库来使用通用的 <A> 元素：

🌐 Alternatively, you can use the @expo/html-elements library to use a universal <A> element:

import { A } from '@expo/html-elements';

export default function Home() {
  return <A href="https://expo.dev">Go to Expo</A>;
}

<A> 组件在网页上渲染一个 <a>，在原生平台上渲染一个使用 expo-linking API 的交互式 <Text>。

🌐 The <A> component renders an <a> on the web and an interactive <Text>that uses the expo-linking API on native platforms.