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

expo-sharing 允许你直接与其他兼容应用共享文件，并接收来自其他应用共享的兼容数据。

Web 上的共享限制

• Web 版的 expo-sharing 基于 Web Share API 构建，而该 API 目前仍然只有 非常有限的浏览器支持。在调用之前，请务必使用 Sharing.isAvailableAsync() 检查该 API 是否可用。
• Web 需要 HTTPS：Web Share API 仅在页面通过 https 提供服务时才能在 web 上使用。请使用 npx expo start --tunnel 运行你的应用以启用它。
• Web 上不支持本地文件共享：通过 URI 共享本地文件在 Android 和 iOS 上可用，但在 web 上不可用。你不能在 web 上通过 URI 共享本地文件——你需要先将它们上传到某个位置，然后共享该 URI。

安装

If you are installing this in an existing React Native app, make sure to install expo in your project.

app 配置中的配置

如果你在项目中使用配置插件（持续原生生成（CNG）），你可以使用 expo-sharing 内置的 config plugin 进行配置。该插件允许你配置一些无法在运行时设置的属性，这些属性需要重新构建新的应用二进制文件后才会生效。如果你的应用不使用 CNG，那么你需要手动配置该库。

Example app.json with config plugin

以下示例展示了一个配置，它允许在 Android 和 iOS 上共享单个或多个图像：

{
  "expo": {
    "plugins": [
      [
        "expo-sharing",
        {
          "ios": {
            "enabled": true,
            "activationRule": {
              "supportsImageWithMaxCount": 5
            }
          },
          "android": {
            "enabled": true,
            "singleShareMimeTypes": ["image/*"],
            "multipleShareMimeTypes": ["image/*"]
          }
        }
      ]
    ]
  }
}

Configurable properties

从其他应用分享到你的应用

重要 注意：此功能目前处于实验性状态。在 iOS 上，共享扩展会打开主目标，而不是在共享 ViewController 中处理分享，这并未得到 Apple 的正式支持，并且可能会在未来的 iOS 版本中停止工作。

当应用用户将内容分享给你的应用时，操作系统会启动你的应用（也称为将其带到前台的过程）。要处理此操作，你需要配置你的导航来处理传入的深度链接。

Expo Router

如果你正在使用 Expo Router，可以使用 +native-intent.ts 文件来处理传入的分享意图。这使你能够检查传入的路径并重定向到特定路由。

import { getSharedPayloads } from 'expo-sharing';

export async function redirectSystemPath({ path, initial }: { path: string; initial: boolean }) {
  try {
    // 检查 URL 是否来自分享扩展/意图
    if (new URL(path).hostname === 'expo-sharing') {
      return '/handle-share';
    }
    return path;
  } catch {
    // 出错时回退到根路径
    return '/';
  }
}

React Navigation

如果你正在使用 React Navigation，可以使用 linking 属性来拦截深度链接。你应该检查传入的 URL 主机名是否匹配 expo-sharing scheme，并将用户重定向到特定的处理屏幕。

import * as Linking from 'expo-linking';
import { createStaticNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    // 其他屏幕
    HandleShare: {
      screen: HandleShare,
      linking: {
        path: '/handle-share',
      },
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

function processUrl(url: string | null) {
  if (!url) return null;

  // 你的分享处理屏幕的路径
  const handlerUrl = Linking.createURL('/handle-share');

  // 检查 URL 是否来自分享扩展/意图
  if (new URL(url).hostname === 'expo-sharing') {
    return handlerUrl;
  }
  return url;
}

export default function App() {
  return (
    <Navigation
      // 其余的导航配置
      linking={{
        prefixes: [Linking.createURL('/')],
        async getInitialURL() {
          const initialUrl = await Linking.getInitialURL();
          return processUrl(initialUrl);
        },
        subscribe(listener) {
          const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
            const processedUrl = processUrl(url) ?? url;
            listener(processedUrl);
          });

          return () => {
            linkingSubscription.remove();
          };
        },
      }}
    />
  );
}

没有导航库

如果你正在创建一个不使用导航库的基础应用，你的主屏幕就是处理屏幕。你可以继续下一节。

显示共享内容

一旦你将用户重定向到处理屏幕，就可以使用 useIncomingShare hook 来访问并显示共享数据。

下面的示例展示了一个显示共享图片的屏幕：

import { Image } from 'expo-image';
import { useIncomingShare } from 'expo-sharing';
import { View, StyleSheet, ActivityIndicator } from 'react-native';

export default function ShareReceived() {
  const { resolvedSharedPayloads, isResolving } = useIncomingShare();

  if (isResolving) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {resolvedSharedPayloads.map((payload, index) => {
        if (payload.contentType === 'image') {
          return <Image source={{ uri: payload.contentUri }} style={styles.image} key={index} />;
        }
        return null;
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  image: {
    width: 300,
    height: 300,
    marginBottom: 20,
    borderRadius: 10,
  },
});

API

import * as Sharing from 'expo-sharing';

Hooks

Props

Methods

Types

Config plugin types