web-dev-qa-db-ja.com

React-native-Android-画像をAndroidファイルシステムに保存し、電話の「ギャラリー」で表示する方法

画像をAndroidのローカルファイルシステムに保存して、携帯電話の「ギャラリー」やフォルダから表示できるようにすることはできますか？

私はこれを見つけました react-native-fs ライブラリですが、ドキュメントを調べて例を試した後、それが可能かどうかはまだわかりません。

ありがとう

react-nativefilesystemsreact-native-androidreact-native-fsreact-native-fetch-blob
6
Larney

同じ問題を抱えている人のために、ここに解決策があります。

解決

react-native-fetch-blob ライブラリの File System 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)
  });
},

上記のメソッドに含まれる次のコードは、ギャラリーを更新します。そうしないと、電話の電源をオフにしてから再びオンにするまで画像が表示されません。

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

楽しい！

14
Larney

react-native-fs で絶対にこれを行うことができます。 PicturesDirectoryPath 定数がありますが、これはプロジェクトのREADME）には記載されていません。ファイルをそこに保存すると、ギャラリーに表示されます。アプリ。自分のアルバムに表示したい場合は、そのフォルダに新しいディレクトリを作成し、そこにファイルを保存します。

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

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

代わりにアプリのプライベートキャッシュディレクトリに画像を保存しなくなったため、完全なサンプルコードはもうありません。これがとにかく役立つことを願っています！

9
warby