React Native 下载图片并保存到相册

Question

React Native 下载图片并保存到相册

3

我想从URL下载图像并保存到图库中。

这个代码在Android上运行良好，但在iOS上无效。

import RNFetchBlob from "rn-fetch-blob";


let imgUrl = 'https://static.scientificamerican.com/sciam/cache/file/EAF12335-B807-4021-9AC95BBA8BEE7C8D_source.jpg'

let newImgUri = imgUrl.lastIndexOf('/');
let imageName = imgUrl.substring(newImgUri);

let dirs = RNFetchBlob.fs.dirs;
let path = Platform.OS === 'ios' ? dirs['MainBundleDir'] + imageName : dirs.PictureDir + imageName;

 RNFetchBlob.config({
     fileCache: true,
     appendExt: 'png',
     indicator: true,
     IOSBackgroundTask: true,
     path: path,
     addAndroidDownloads: {
         useDownloadManager: true,
         notification: true,
         path: path,
         description: 'Image'
      },

     }).fetch("GET", imgUrl).then(res => { 
            console.log(res, 'end downloaded') 
   });

我需要哪些iOS权限才能将照片保存到相册中？

- Gurbela

类似问题：https://dev59.com/AqXja4cB1Zd3GeqPVbdC - Oleg

我已经在info.plist中添加了NSPhotoLibraryAddUsageDescription（“Privacy - Photo Library Additions Usage Description”），但它并没有起作用。 - Gurbela

你想保存到dirs['MainBundleDir']目录吗？为什么不使用Platform.OS === 'ios' ？fs.dirs.DocumentDir : - Oleg

iOS没有dirs.PictureDir。 - Gurbela

3个回答

4

你需要使用相机胶卷。

npm install @react-native-community/cameraroll --save
react-native link @react-native-community/cameraroll
从：

import { CameraRoll } from "react-native";

到：

import CameraRoll from "@react-native-community/cameraroll";

- Oleg

它不起作用，如何发送权限请求？（NSPhotoLibraryAddUsageDescription） - Gurbela

0.10.15，我有react-native 0.59.9。 - Gurbela

请查看 https://stackoverflow.com/questions/54123046/image-is-not-showing-in-the-ios-device-after-getting-downloaded-through-rn-fetch/54125033#54125033 - Oleg

react-native link @react-native-community/cameraroll - Oleg

需要运行pod install命令才能使其正常工作。 - priyanka

显示剩余5条评论

1

截至2023年，@react-native-community/cameraroll已被弃用，并且从React Native库中移除了CameraRoll。

请按照以下说明进行操作： https://github.com/react-native-cameraroll/react-native-cameraroll

- Dharay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohsin Riaz · Accepted Answer

对于iOS，您无需使用fetch-blob并下载它。您需要使用react-native中的CameraRoll，并调用saveToCameraRoll（）。

https://facebook.github.io/react-native/docs/cameraroll

import RNFetchBlob from "rn-fetch-blob";
import { CameraRoll, Platform } from "react-native";

let imgUrl = 'https://static.scientificamerican.com/sciam/cache/file/EAF12335-B807-4021-9AC95BBA8BEE7C8D_source.jpg'

let newImgUri = imgUrl.lastIndexOf('/');
let imageName = imgUrl.substring(newImgUri);

let dirs = RNFetchBlob.fs.dirs;
let path = Platform.OS === 'ios' ? dirs['MainBundleDir'] + imageName : dirs.PictureDir + imageName;

saveToGallery = () => {
  if (Platform.OS == 'android') {

    RNFetchBlob.config({
      fileCache: true,
      appendExt: 'png',
      indicator: true,
      IOSBackgroundTask: true,
      path: path,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        path: path,
        description: 'Image'
      },

    }).fetch("GET", imgUrl).then(res => {
      console.log(res, 'end downloaded')
    });
  } else {
    CameraRoll.saveToCameraRoll(imgUrl);
  }
}