从iOS React Native FS上的URL下载图像

时间:2018-11-12 08:16:16

标签: ios react-native

我使用react-native-fs从iOS中的url下载图像。我在模拟器上检查其下载成功,并包含以下路径:

  

/ Users / admin / Library / Developer / CoreSimulator / Devices / 443C8F7F-AB92-4217-A999-A7BDBA52A6B6 / data / Containers / Data / Application / 99958A5C-E350-4855-B8CE-ED6FA999C619 / Documents。

在真实设备上,它是路径(iPhone 8 Plus):

  

/ var / mobile /容器/数据/应用程序/63F84623-E684-456F-A55A-01E22708C012/Documents/pexels-photo-1109561.jpeg

我尝试设置:const destPath = RNFS.DocumentDirectoryPath + '/images/' + name;

因为当我从真实设备上的照片中选择图像时,这是路径:

  

file:///var/mobile/Containers/Data/Application/8DE01885-DEFE-4667-B6FF-CE693A0DADB3/Documents/images/1520FCA5-80AB-4300-A7F6-2D2C974D726A.jpg

但不起作用。我想将此图像显示在照片上,这意味着下载成功后,我可以立即在我的照片上看到它,该怎么办以及其他文件,例如:mp3,mp4,文本,下载后如何查找并显示为用户何时想阅读?

这是我的代码:

    downloadImage = () => {
   // download(this.props.image.url, '_Subiz/image_' + this.props.image.name);

   this.download(this.props.image.url, `${RNFS.DocumentDirectoryPath}/react-native.png`)

  };


  download = async (target, destination) => {
    try{
      let options = {
        fromUrl: target,
        toFile: destination,
        begin: (res) => {
          console.log(res)
        },
        progress: (data) => {
          console.log(data)
        },
        background: true,
        progressDivider: 1
      };
      console.log(options);
      const request = await RNFS.downloadFile(options).promise
      console.log(request)
    }catch(e){
      console.log(e)
    }
  };

1 个答案:

答案 0 :(得分:0)

如果您使用https://github.com/joltup/rn-fetch-blob库。您可以下载简单的方法图片。而且您也可以在照片库中查看它

const { fs } = RNFetchBlob;
let Picture = fs.dirs.PictureDir;

 RNFetchBlob
          .config({
                appendExt : 'png',
                fileCache: true,
                path:  Picture+(new Date()).getTime()+'.png',
           })
          .fetch('GET', 'image_url')
          .then((resp) => {
            // the image path you can use it directly with Image component
            console.log(resp.path());
            return resp.readFile('base64'); // If you get base64 file
          })
          .then((base64Data) => { 
            console.log(base64Data);
          }).catch((errorMessage, statusCode) => {
            // error handling
            console.log('errorMessage2:'+errorMessage)
          });