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 上的共享限制
expo-sharingfor web 基于 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 config 中配置
如果你的项目使用了配置插件(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 的 hostname 是否匹配 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: { // 其他屏幕 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 是否来自分享扩展/intent 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
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