链接到其他应用

了解如何根据其他应用的 URL scheme，在你的应用中处理并打开一个 URL。

通过使用目标应用的 URL，可以实现从你的应用跳转到其他应用。你可以使用两种方法在你的应用中打开这些 URL：

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

使用 expo-linking API

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

下面的示例使用 通用 URL 方案在操作系统的默认浏览器中打开，并使用 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="Open a 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> 组件，在网页上则是一个 <a> 元素。它还使用 expo-linking API 来处理 URL 方案。

下面的示例在操作系统的默认浏览器中打开一个 常见的 URL 方案 （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">Open a URL</Link>
    </View>
  );
}

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

常用的 URL 方案

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

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%%
    ]
  }
}

Custom URL schemes

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

一些服务提供有关如何使用其应用自定义 URL 方案的文档。例如，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=View%20team%20roster&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="Open URL with the system browser"
        onPress={() => Linking.openURL('https://expo.dev')}
        style={styles.button}
      />
      <Button
        title="Open URL with an in-app browser"
        onPress={() => WebBrowser.openBrowserAsync('https://expo.dev')}
        style={styles.button}
      />
    </View>
  );
}

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

在网页上提供更多链接功能

要在网页上提供更多链接功能，例如右键复制或悬停预览，您可以使用来自 expo-router 库的 Link 组件。

import { Link } from 'expo-router';

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

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

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>。