React-native-android

Question

是否可以将图像保存到 android 的本地文件系统，以便可以从 phone 的 'Gallery' 和文件夹中查看？？

我找到了这个 react-native-fs 库，但在研究了文档并完成了一个示例之后，我仍然不确定它是否可行。

谢谢

Answer 1

您完全可以使用 react-native-fs. There's a PicturesDirectoryPath 常量来完成此操作，该常量在项目的自述文件中未提及；如果您将文件保存到那里，它应该会出现在图库应用程序中。如果你想让它出现在你自己的相册中，只需在该文件夹中新建一个目录并将文件保存到那里，例如

const myAlbumPath = RNFS.PicturesDirectoryPath + '/My Album'

RNFS.mkdir(myAlbumPath)
  .then(/* write/copy/download your image file into myAlbumPath here */)

抱歉，我没有完整的示例代码了，因为我不再将图像存储在应用程序的私有缓存目录中。希望这对您有所帮助！

Answer 2

对于遇到相同问题的任何人，这里是解决方案。

解决方案

我正在使用 File System API from the react-native-fetch-blob 库。这是因为我认为它比 'react-native-fs' 库更好地记录并且更容易理解。

我从服务器请求一个图像，接收一个 base64，然后我将它保存到 android fs 中的 Pictures 目录。

我这样保存图片：

var RNFetchBlob = require('react-native-fetch-blob').default;

const PictureDir = RNFetchBlob.fs.dirs.PictureDir;

getImageAttachment: function(uri_attachment, filename_attachment, mimetype_attachment) {

   return new Promise((RESOLVE, REJECT) => {

   // Fetch attachment
   RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
   .then((response) => {

     let base64Str = response.data;

     let imageLocation = PictureDir+'/'+filename_attachment;

     //Save image
     fs.writeFile(imageLocation, base64Str, 'base64');
     console.log("FILE CREATED!!")

     RNFetchBlob.fs.scanFile([ { path : imageLocation, mime : mimetype_attachment } ])
     .then(() => {
       console.log("scan file success")
     })
     .catch((err) => {
       console.log("scan file error")
     })

    }).catch((error) => {
    // error handling
    console.log("Error:", error)
  });
},

上述方法中的以下代码会刷新图库，否则在 phone 关闭并重新打开之前图像不会显示。

RNFetchBlob.fs.scanFile([ { path : imageLocation, mime : mimetype_attachment } ])
.then(() => {
  console.log("scan file success")
})
.catch((err) => {
  console.log("scan file error")
})

尽情享受吧！

React-native-android - 如何将图像保存到 Android 文件系统并在 phone 的 'Gallery' 中查看

React-native-android - How to save an image to the Android file system and view in the phone's 'Gallery'

filesystems

react-native

react-native-fs

react-native-fetch-blob

解决方案