React Native之圖片儲存到本地相簿(ios android)

來源:互聯網
上載者:User
React Native之圖片儲存到本地相簿(ios android)一,需求分析

    1,react native儲存網狀圖片到相簿,iOS端可以用RN內建的CameraRoll完美解決,但是android端不支援從網路儲存圖片。

    2,只儲存一張圖片到本地相簿(比如產生的邀請卡 付款碼等)

二,介紹與iOS簡單配置     2.1 介紹saveToCameraRoll(tag, type?)方法介紹(1)這個是 CameraRoll 的一個靜態方法,作用是儲存一張圖片到相簿。(2)參數 tag 是圖片的地址,為字串類型。其內容根據不同的裝置也有所不同:
    • 在 Android 上:tag 是本地地址,例如:"file:///sdcard/img.png"
    • 在 iOS 上:tag 可以是 url、assets-library、記憶體配置圖片中的一種。
(3)參數 type 不是必須的,可選值是'photo' 或 'video'。用來表示存的是圖片還是視頻。不指定的話程式也會根據尾碼自行判斷。(結尾為 .mov 或 .mp4 為視頻,其它為圖片)     2.2 CameraRoll API iOS連結配置 第一步    添加CameraRoll庫(node_modules/react-native/ Libraries/CameraRoll/RCTCameraRoll.xcodeproj)到XCode的 Libraries分組裡  第二步    將 RCTCameraRoll.xcodeproj下的 Products檔案夾中的靜態庫檔案(.a檔案,拖到Xcode General--Linked FrameworksLibraries下。

第三步

    配置訪問相簿的許可權,如果不配置Privacy - Photo Library Additions Usage Description到Info.plist下,會出現閃退情況。在Info.plist添加如下:

1     <key>NSPhotoLibraryAddUsageDescription</key>2     <string>使用相簿</string>3     <key>NSPhotoLibraryUsageDescription</key>4     <string>使用相簿</string>

     Android可以直接存取CameraRoll API

1 import { Platform, CameraRoll } from 'react-native';2 import RNFS from 'react-native-fs';
三,應用執行個體    3.1 網狀圖片儲存到相簿(支援iOS Android)

下載網狀圖片,並儲存到相簿中:

 1 /** 2  * 下載網頁圖片 3  * @param uri  圖片地址 4  * @returns {*} 5  */ 6 export const DownloadImage=(uri)=> { 7     if (!uri) return null; 8     return new Promise((resolve, reject) => { 9         let timestamp = (new Date()).getTime();//擷取目前時間錯10         let random = String(((Math.random() * 1000000) | 0))//六位隨機數11         let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //外部檔案,共用目錄的絕對路徑(僅限android)12         const downloadDest = `${dirs}/${timestamp+random}.jpg`;13         const formUrl = uri;14         const options = {15             fromUrl: formUrl,16             toFile: downloadDest,17             background: true,18             begin: (res) => {19                 // console.log('begin', res);20                 // console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');21             },22         };23         try {24             const ret = RNFS.downloadFile(options);25             ret.promise.then(res => {26                 // console.log('success', res);27                 // console.log('file://' + downloadDest)28                 var promise = CameraRoll.saveToCameraRoll(downloadDest);29                 promise.then(function(result) {30                    // alert('儲存成功!地址如下:\n' + result);31                 }).catch(function(error) {32                      console.log('error', error);33                     // alert('儲存失敗!\n' + error);34                 });35                 resolve(res);36             }).catch(err => {37                 reject(new Error(err))38             });39         } catch (e) {40             reject(new Error(e))41         }42 43     })44 45 }

使用執行個體

 1  //儲存圖片 2     DownloadImage=(uri)=>{ 3         Download.DownloadImage(uri).then((res)=>{ 4             if(res.statusCode==200){ 5                 Toast.show('圖片儲存成功') 6             }else{ 7                 Toast.show('圖片儲存失敗') 8             } 9         })10         .catch((error)=>{11             Toast.show('圖片儲存失敗')12            console.log(error)13         })14     }
    3.2 記憶體配置圖片儲存到相簿(支援iOS Android)

將記憶體配置圖片儲存到相簿中:

 1 /** 2  * 儲存圖片到相簿 3  * @param ImageUrl  圖片地址 4  * @returns {*} 5  */ 6 export const DownloadLocalImage=(ImageUrl)=> { 7     if (!ImageUrl) return null; 8     return new Promise((resolve, reject) => { 9         try {10                 var promise = CameraRoll.saveToCameraRoll(ImageUrl);11                 promise.then(function(result) {12                     resolve({statusCode:200});13                     //alert('儲存成功!地址如下:\n' + result);14                 }).catch(function(error) {15                      console.log('error', error);16                     // alert('儲存失敗!\n' + error);17                 });18         } catch (e) {19             reject(new Error(e))20         }21 22     })23 24 }

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.