[React Native] 이미지 다운로드할 때, 이름 변경 (rn-fetch-blob)

📍 라이브러리: "rn-fetch-blob": "^0.12.0"

라이브러리 정보: https://www.npmjs.com/package/rn-fetch-blob

rn-fetch-blob

---

📍 '다운로드'버튼 클릭시, 사진을 아이폰 '파일'앱으로 다운로드하는 방법

1. '다운로드'버튼 클릭시, 사진을 아이폰 '파일'앱으로 다운로드하는 코드 작성하기.

아래의 유튜브를 보고 고대로 따라함.

 

참고자료: https://www.youtube.com/watch?v=_mrXOgg4VXg

▼ '다운로드'버튼 기능 코드

  const IMAGE_PATH =
    'https://images.pexels.com/photos/17139158/pexels-photo-17139158.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load';

  const checkPermission = async () => {
    if (Platform.OS === 'ios') {
      downloadImage();
    } else {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'Storage Permission Required',
            message: 'App needs access to your storage to download Photos',
          },
        );

        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('Storage Permission Granted.');
          downloadImage();
        } else {
          CustomAlert('Storage Permission Not Granted');
        }
      } catch (error) {
        console.warn(error);
      }
    }
  };

  const downloadImage = () => {
    let date = new Date();
    let image_URL = IMAGE_PATH;
    let ext = getExtention(image_URL);
    ext = '.' + ext[0];
    const { config, fs } = RNFetchBlob;
    let PictureDir = fs.dirs.PictureDir;
    let options = {
      fileCache: true,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        path:
          PictureDir +
          '/image_' +
          Math.floor(date.getTime() + date.getSeconds() / 2) +
          ext +
          '.jpg',
        description: 'Image',
      },
    };
    config(options)
      .fetch('GET', image_URL)
      .then(res => {
        console.log('res -> ', JSON.stringify(res));
        alert('사진 다운로드가 완료되었습니다.');
      });
  };
  
    const getExtention = filename => {
    return /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined;
  };

위의 기능 코드 외에, 라이브러리설치, UI 및 설정해야하는 코드는 유튜브 참고하기. 

---

2. 구현 완료한 상태

왼) 초록버튼을 클릭하는 화면

오) xcode 시뮬레이터의 '파일'앱에 이미지가 저장된 상태

---

📍 이미지의 이름을 수정하는 방법

1. '다운로드'초록버튼을 클릭시, 나오는 콘솔을 확인하여, 저장되는 경로와 파일이름 확인하기.

▼ console.log('res -> ', JSON.stringify(res))

res ->
{"data":"/Users/daram-tree/Library/Developer/CoreSimulator/Devices/201F856E-BF49-4BD2-A356-104A1073DFD7/data/Containers/Data/Application/35AA6A22-815D-48F8-8382-BA1756D4FE31/Documents/image_1686642262327.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load.jpg","taskId":"lvgzevgjmbb9q4p5x4kpy",
. . . . .

---

2. path 속성 수정하기 (ios반영)

▼ '다운로드'버튼 기능 중 아래의 코드 수정하기

let DocumentDir = fs.dirs.DocumentDir;
let options = {
      fileCache: true,
      /* path 속성 추가함(ios반영됨.)	
      DocumentDir는 라이브러리에서 제공하는 경로	
      ''안에는 원하는 이름으로 작성하기.	*/
      path: DocumentDir + '/image.jpg',
      // addAndroidDownloads는 안드로이드에서 반영됨
      addAndroidDownloads: {
        . . . . .
      },
    };

 

image.jpg파일은 path 속성에서 반영된 사진임.

RNFetchBlob_tmp 파일은 path 속성 없을때, 저장되는 사진모음 파일임.

 

---

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D