反应本机共享映像

Roh*_*ale 5 reactjs react-native

我试图通过各种可用设备的应用程序(例如whatsApp,skype,电子邮件等)将从相机或图库中获取的图像共享到其他设备。我发现提供了“共享”功能,但据我所知它仅允许共享文本数据。

是否有人对通过React本机应用程序共享图像有任何想法。

提前致谢。

Bru*_*ujo 8

解决方案:

  • 获取转换base64的图片路径。

  • 对于共享图像使用:react-native-share lib share

  • 要访问设备目录,我建议使用:rn-fetch-blob。 维基库

      dwFile(file_url) {
          let imagePath = null;
          RNFetchBlob.config({
              fileCache: true
          })
          .fetch("GET", file_url)
          // the image is now dowloaded to device's storage
          .then(resp => {
              // the image path you can use it directly with Image component
              imagePath = resp.path();
              return resp.readFile("base64");
          })
          .then(async base64Data => {
              var base64Data = `data:image/png;base64,` + base64Data;
              // here's base64 encoded image
              await Share.open({ url: base64Data });
              // remove the file from storage
              return fs.unlink(imagePath);
          });
      }
    
    Run Code Online (Sandbox Code Playgroud)

希望这可以帮助。

  • 非常好的解决方案!刚刚在我的系统上做了一些小的更改 - “fs.unlink(imagePath)”到“RNFetchBlob.fs.unlink(imagePath)” (3认同)
  • 谢谢!我在这里缺少的是“data:image/png;base64”,base64 图像值的前缀。 (2认同)

小智 4

也可以通过参数 Share 来发送图片url

url: "data:image/png;base64,<base64_data>" 干杯

  • 阅读文档,似乎“url”仅适用于ios。 (14认同)
  • 嘿@Juanan Jimenez,它对我不起作用,你能确定它在 Android 上是否有效吗? (2认同)