This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

通过使用目标应用的 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>。