This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Expo 分享
一个提供与其他应用共享和接收数据功能的库。
expo-sharing 允许你直接与其他兼容应用分享文件,并接收从其他应用分享的兼容数据。
Web 平台上的分享限制
- Web 版
expo-sharing基于 Web Share API 构建,该 API 目前仍然只有非常有限的浏览器支持。调用前,请使用Sharing.isAvailableAsync()检查是否可以使用该 API。 - Web 平台需要 HTTPS:只有在页面通过 https 提供服务时,Web Share API 才能在 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.
在应用配置中配置
如果项目使用配置插件(Continuous Native Generation(CNG)),你可以通过内置的配置插件配置 expo-sharing。该插件允许你配置各种无法在运行时设置、需要重新构建应用二进制文件才能生效的属性。如果应用不使用 CNG,则需要手动配置此库。
Example app.json with config plugin
以下示例展示了如何配置,以便在 Android 和 iOS 上分享一张或多张图片:
Configurable properties
从其他应用向你的应用分享内容
注意:此功能目前处于实验性阶段。在 iOS 上,分享扩展会打开主目标,而不是在分享
ViewController中处理分享;这并未得到 Apple 的官方支持,并且可能会在未来的 iOS 版本中停止工作。
当应用用户向你的应用分享内容时,操作系统会启动你的应用(也称为将应用带到前台)。要处理此操作,你需要配置导航来处理传入的深层链接。
Expo Router
如果你使用 Expo Router,可以使用 +native-intent.ts 文件处理传入的分享 Intent。这样你就可以检查传入路径并重定向到特定路由。
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'; import HandleShare from './HandleShare'; const RootStack = createNativeStackNavigator({ screens: { // Other screens HandleShare: { screen: HandleShare, linking: { path: '/handle-share', }, }, }, }); const Navigation = createStaticNavigation(RootStack); function processUrl(url: string | null) { if (!url) return null; // The path to your share handler screen const handlerUrl = Linking.createURL('/handle-share'); // Check if the URL is from the share extension/intent if (new URL(url).hostname === 'expo-sharing') { return handlerUrl; } return url; } export default function App() { return ( <Navigation // The rest of your navigation config 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
Hook, which returns the data shared with the application and updates the data if the shared payload has changed.
UseIncomingShareResultProps
{
enabled: boolean,
multipleShareMimeTypes: string[],
singleShareMimeTypes: string[]
}{
activationRule: ActivationRule,
appGroupId: string,
enabled: boolean,
extensionBundleIdentifier: string
}Methods
Returns resolved data shared with the app. Compared to data returned from getSharedPayloads contains additional
information useful for reading and displaying the data. For example, when a web URL is shared with the app,
a resolved payload will contain additional information about the URL contents.
Depending on what has been shared, this method may require a network connection to resolve content details.
Promise<ResolvedSharePayload[]>Returns raw data shared with the app. Returns an empty array if no data has been shared with the app.
SharePayload[]Determine if the sharing API can be used in this app.
Promise<boolean>A promise that fulfills with true if the sharing API can be used, and false otherwise.
Opens action sheet to share file to different applications which can handle this type of file.
Promise<void>Types
Literal type: string
Describes the resolved content type.
Acceptable values are: 'text' | 'audio' | 'image' | 'video' | 'file' | 'website'
Literal type: union
Represents a payload shared with the app, with additional information about the shared contents.
Acceptable values are: UriBasedResolvedSharePayload | TextBasedResolvedSharePayload
Literal type: string
Determines the type of content being shared.
text: Plain text content.url: A specific URL.audio: An audio file.image: An image file.video: A video file.file: A generic file.
Acceptable values are: 'text' | 'url' | 'audio' | 'image' | 'video' | 'file'
Represents a resolved payload, where a text was shared with the app.
Type: BaseResolvedSharePayload extended by:
Represents a resolved payload, for which the data can be accessed through a URI.
Type: BaseResolvedSharePayload extended by:
Object returned by useIncomingShare hook containing information about data shared with the app.
Config plugin types
Describes a configuration for data types that are possible to share in the application on iOS.
Literal type: union
Acceptable values are: SingleShareAction | MultiShareAction