如何在 React Native 中获取从 Firebase 存储下载的图像文件的本地文件路径答案

【问题标题】：How to get local file path of image file downloaded from Firebase Storage in React Native如何在 React Native 中获取从 Firebase 存储下载的图像文件的本地文件路径
【发布时间】：2020-10-24 19:54:42
【问题描述】：

在我的 React Native 应用程序中，我需要

将图片上传到 Firebase 存储
然后下载并编辑（裁剪/旋转）
再次将编辑后的图像上传到 Firebase 存储

我能够上传图片，使用 getDownloadURL() 方法获取其 URL，并使用 Image 组件显示它，因为它会立即获取 url 输入。

现在我需要本地文件路径才能编辑编辑后的图像并将其重新上传到 Firebase 存储。

This question 解释了一个getFile() 方法，但我找不到它firebase docs。另一个question 给出了一些方向，但它在 JAVA 中。

Some Blogs 提到使用诸如react-native-fs、react-native-fetch-blob 等库，但似乎他们正试图将文件保存在存储/库中。这对我的要求是不必要的（我不想将图像保存在图库中）。我可能只需要下载它的缓存图像的路径。

有人能解释一下如何用 React Native 术语获取下载的图像文件的本地文件路径吗？

编辑：

不使用世博会。而且我希望它同时适用于 Android 和 iOS。

【问题讨论】：

标签： firebase react-native firebase-storage

【解决方案1】：

npm install rn-fetch-blob

按照以下步骤操作：

a) 按照安装说明进行操作。

a2) 如果您想在不使用 rnpm 的情况下手动安装软件包，请转到他们的wiki。

b) 最后，这就是我使在我的应用程序中下载文件成为可能的方式：

const { config, fs } = RNFetchBlob
let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
let options = {
  fileCache: true,
  addAndroidDownloads : {
    useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
    notification : false,
    path:  PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
    description : 'Downloading image.'
  }
}
config(options).fetch('GET', "http://www.example.com/example.pdf").then((res) => {
  // do some magic here
})

或

const { uri: localUri } = await FileSystem.downloadAsync(remoteUri, FileSystem.documentDirectory + 'name.ext');

【讨论】：

第一个选项有 Android 特定键“addAndroidDownloads”，它只适用于 android 还是适用于 iOS？我猜第二个选项只适用于世博会。但我没有使用博览会。
对于 iOS，它将忽略 addAndroidDownloads 中的设置，文件将保存在设备上的文档目录中，因为这是给定的路径。
让 PictureDir = Platform.OS === 'ios' ? fs.dirs.DocumentDir：fs.dirs.PictureDir；将 PictureDir 替换为这一行
感谢@Ferin，它可以解决问题，但正如我在问题中提到的，我不想将图片存储在画廊中。我只需要缓存图像的位置。
对于 iOS，解决这个问题很棘手，但是在 android 中它很容易实现，并且此代码解决了 android 的问题。请点赞或接受我的回答，这会很有帮助。

【解决方案2】：

安装react-native-fs

yarn add react-native-fs

可以得到这样的临时路径

var RNFS = require('react-native-fs');

const imageUrl = `http://www.example.com/abc.png`;
const imagePath = `${Platform.OS==="android"?"/storage/emulated/0/Download":RNFS.TemporaryDirectoryPath}/${((Math.random() * 1000) | 0)}.jpeg`;
RNFS.downloadFile({
        fromUrl: imageUrl,
        toFile: imagePath
    }).promise
        .then((result) => {
          console.log(imagePath);  //here you get temporary path
    })
      .catch((e) => {
        console.log(e,"error");
      })

【讨论】：