React Native之圖片保存到本地相冊(ios android)

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 }