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 }