链接到其他应用

了解如何根据另一个应用的 URL scheme 从你的应用中处理并打开一个 URL。

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

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

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

使用 expo-linking API

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

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

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

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

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

使用 Expo Router 的 Link 组件

如果你的项目使用 Expo Router，请使用 Link 组件来打开 URL。它在原生平台上会包装一个 <Text> 组件，在 Web 上会包装一个 <a> 元素。它也使用 expo-linking API 来处理 URL scheme。

下面的示例会在操作系统的默认浏览器中打开一个 常见 URL scheme（HTTPS）：

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">打开一个 URL</Link>
    </View>
  );
}

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

常见 URL schemes

内置的 URL scheme 可在所有平台上提供对核心功能的访问。以下是常用 scheme 列表：

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 scheme

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

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

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=查看团队成员名单&partner_deeplink=partner%3A%2F%2Fteam%2F9383

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

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

创建 URL

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

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

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

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

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

这将根据环境解析为以下内容：

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

应用内浏览器

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

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="使用系统浏览器打开 URL"
        onPress={() => Linking.openURL('https://expo.dev')}
        style={styles.button}
      />
      <Button
        title="使用应用内浏览器打开 URL"
        onPress={() => WebBrowser.openBrowserAsync('https://expo.dev')}
        style={styles.button}
      />
    </View>
  );
}

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

Web 上的额外链接功能

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

import { Link } from 'expo-router';

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

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

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

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

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