通过 rn-fetch-blob（React native fetch blob）下载后图像未显示在 iOS 设备中

Question

我正在尝试使用此特定代码片段下载小图像：

使用的插件："rn-fetch-blob": "^0.10.14"

 RNFetchBlob.
config({
  fileCache: true,
 
}).
fetch('GET', url, {      //getting image URL from server
  // some headers ..
})
  .then((response) => {
    const base64Str = response.data;
    RNFetchBlob.fs
          .writeFile(imageLocation, base64Str, 'base64')
          .then(() => {
 
              console.log("Download successful");
           
          }).catch((err) => {
            console.log('Failed to save file. ', err);
          });

可变 imageLocation 指向 ${RNFetchBlob.fs.dirs.DocumentDir}/${filename}。

也尝试过 ${RNFetchBlob.fs.dirs.CacheDir}/${filename}。

下载成功，但设备照片中没有图像。

Answer 1

在 iOS 上，文档和缓存目录都包含在应用程序自己的目录中。所以你没有将图像存储在设备照片中。

要将其下载到您需要使用来自 react-native 的 CameraRoll 的设备照片 https://facebook.github.io/react-native/docs/cameraroll

import { CameraRoll } from 'react-native';

本教程向您展示如何使用 CameraRoll

https://medium.com/react-native-training/mastering-the-camera-roll-in-react-native-13b3b1963a2d

但问题的症结在于您可以使用类似这样的方法将图像下载到相机胶卷

saveToCameraRoll = (image) => {
  if (Platform.OS === 'android') {
    RNFetchBlob
      .config({
        fileCache : true,
        appendExt : 'jpg'
      })
      .fetch('GET', image.urls.small)
      .then((res) => {
        CameraRoll.saveToCameraRoll(res.path())
          .then(Alert.alert('Success', 'Photo added to camera roll!'))
          .catch(err => console.log('err:', err))
      })
  } else {
      CameraRoll.saveToCameraRoll(image.urls.small)
        .then(Alert.alert('Success', 'Photo added to camera roll!'))
  }
}

Answer 2

您想要做的是将 base64 编码图像写入文件，但您正在写入的只是图像 url。

通过 rn-fetch-blob（React native fetch blob）下载后图像未显示在 iOS 设备中

Image is not showing in the iOS device after getting downloaded through rn-fetch-blob ( React native fetch blob)

download

react-native

react-native-ios

react-native-fetch-blob