使用 Expo 在 react-native 上共享图像和文件

Posted 2023-02-19

【中文标题】使用 Expo 在 react-native 上共享图像和文件

【英文标题】：Share images and files on react-native using Expo

【发布时间】：2019-04-24 17:14:28

【问题描述】：

我已经使用FileSystem.downloadAsync保存了我想在本地共享的文件

Share.share 适用于 ios。如何分享我在 android 上本地保存的图像？

我试过了

https://github.com/lucasferreira/react-native-send-intent https://github.com/react-native-community/react-native-share

这两种解决方案不似乎都适用于 Expo。

我正在使用 react-native 版本：https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz

FileSystem.downloadAsync(url, FileSystem.documentDirectory+filename).then((uri)=>

    if(Platform.OS == "android")
        // ???
    
    else
        Share.share(url:uri);
    

)

我有什么遗漏吗？

【问题讨论】：

github.com/lucasferreira/react-native-send-intent 将无法工作，除非您弹出

两者都不是github.com/react-native-community/react-native-share

【参考方案1】：

从 SDK33 开始，您可以使用 Expo Sharing 将任何类型的文件共享给其他可以处理其文件类型的应用，即使您使用的是 Android。

见：https://docs.expo.io/versions/latest/sdk/sharing/

用法很简单：

import * as Sharing from 'expo-sharing'; // Import the library

Sharing.shareAsync(url) // And share your file !

【讨论】：

这使您可以共享本地文件。如何共享从外部源（例如 S3）加载到 <Image /> 的文件？

@MikeK 您可以使用 Expo 的 FileSystem 库从 S3 下载文件，然后分享本地下载文件的 uri。

这就是我最终所做的，但对我来说似乎是一个额外的步骤，不是吗？我觉得我也应该能够访问缓存/加载的图像，而不必将它们显式下载到临时位置，然后在共享后将其删除。

【参考方案2】：

为了让用户分享保存在我们 (Expo) 应用中的内容，我们采用了这样的结构。 （这适用于 iOS 和 Android）。

导入共享：

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

将 ONPRESS 添加到按钮（或任何位置）：

  <Button
   name="share"
   onPress=() =>
      openShareDialogAsync(media, 
         video: media.meta.fileType === 'video',
         )
       
   />

将视频或图像分享到用户手机中的任何应用程序

 const openShareDialogAsync = async (mediaProp, options) => 
    const fileDetails = 
      extension: options.video ? '.mp4' : '.jpg',
      shareOptions: 
        mimeType: options.video ? 'video/mp4' : 'image/jpeg',
        dialosTitle: options.video
          ? 'Check out this video!'
          : 'Check out this image!',
        UTI: options.video ? 'video/mp4' : 'image/jpeg',
      ,
    ;
    const downloadPath = `$FileSystem.cacheDirectory$mediaProp.media_id$fileDetails.extension`;
    const  uri: localUrl  = await FileSystem.downloadAsync(
      mediaProp.url,
      downloadPath
    );
    if (!(await Sharing.isAvailableAsync())) 
      showMessage(
        message: 'Sharing is not available',
        description: 'Your device does not allow sharing',
        type: 'danger',
      );
      return;
    
    await Sharing.shareAsync(localUrl, fileDetails.shareOptions);
  ;

希望这会有所帮助：]