React-native-android - 如何将图像保存到Android文件系统并在手机的"图库"中查看

Lar*_*ney 5 filesystems react-native react-native-android react-native-fs react-native-fetch-blob

是否可以将图像保存到Android的本地文件系统,以便可以从手机的"图库"和文件夹中查看?

我找到了这个react-native-fs库,但在研究了文档并通过一个例子后,我仍然不确定它是否可行.

谢谢

Lar*_*ney 13

对于任何有相同问题的人,这是解决方案.

我使用的文件系统API反应原生取二进制大对象库.这是因为我认为它比'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)
  });
},
Run Code Online (Sandbox Code Playgroud)

上述方法中的以下代码会刷新图库,否则图像将无法显示,直到手机关闭并重新打开.

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

请享用!


小智 9

您可以使用react-native-fs完全执行此操作.有一个PicturesDirectoryPath常量,在项目的README中没有提到; 如果您将文件保存到那里,它应该出现在Gallery应用程序中.如果您希望它出现在您自己的相册中,只需在该文件夹中创建一个新目录并将文件保存到那里,例如

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

RNFS.mkdir(myAlbumPath)
  .then(/* write/copy/download your image file into myAlbumPath here */)
Run Code Online (Sandbox Code Playgroud)

我没有完整的示例代码,对不起,因为我结束了将图像存储在我的应用程序的私有缓存目录中.希望无论如何这有帮助!