[React Native] 라이브러리 및 속성 사용법 (rn-fetch-blob)

 

서론

 

사진 및 파일 다운로드시, 아이폰ios, 안드로이드폰android 자체 파일앱에 저장하게 된다. 

이 과정에서 특히 아이폰은 해당 파일을 찾아갈때마다 경로(파일명)이 랜덤으로 바뀌기 때문에, 

라이브러리를 사용하여 그 랜덤경로를 따라가야한다

 

---

라이브러리 정보

https://www.npmjs.com/package/rn-fetch-blob/v/0.12.0

rn-fetch-blob

---

라이브러리 적용 예시

 

▼ 예시코드

      import RNFetchBlob from 'rn-fetch-blob';                          // 라이브러리 상태: "rn-fetch-blob": "^0.12.0"

      const func = (item) => {
        const imgUrl = item.url;                                        // imgUrl=  주소
        const title = `${item.name}_${item.date}`;                      // title= 사진이름_일시
        const { config, fs } = RNFetchBlob;                             // 라이브러리: rn-fetch-blob 사진저장기능
        let PictureDir = fs.dirs.PictureDir;                            // 라이브러리: android 저장경로 설정
        let DocumentDir = fs.dirs.DocumentDir;                          // 라이브러리: ios 저장경로 설정
        let options = {
          fileCache: true,
          path: DocumentDir + `/평면도/${title}.png`,                     // ios 저장경로 최종설정
          addAndroidDownloads: {
            useDownloadManager: true,
            notification: true,
            path: PictureDir + `/평면도/${title}.png`,                    // android 저장경로 최종설정
            description: "Image",
            mediaScannable: true,
          },
        };

        config(options)
          .fetch("GET", imgUrl)
          .then((res) => {
            // console.log('res -> ', JSON.stringify(res));             // 저장완료 결과 확인콘솔
          });
      };

      const item = { url: "주소", name: "사진이름", date: "일시" };         // item= 다운받은 사진에 대한 정보 object

      func(item);                                                       // func 커스텀함수실행

 

나는 "rn-fetch-blob": "^0.12.0" 을 적용하였다

Object item 이라는 사진정보를 활용하여, func(item) 함수를 실행함으로서,

핸드폰 자체에있는 파일앱 또는 사진앱에 사진을 저장하였다.

해당 사진을 불러오는 기능도 동일한 라이브러리를 활용하면 가능하다.

 

---

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