React native pictures saved to a local album (iOS Android)
1, requirements analysis
(1),react native Save the network image to the album, iOS can be used with RN cameraroll perfect solution, but the Android side does not support to save pictures from the network.
(2), save only one picture to the local album (such as generated invitation card payment code, etc.)
2, introduction with iOS Simple Configuration
2.1 introduction Savetocameraroll (tag, type?) Method Introduction
(1) This is a static method of Cameraroll, the function is to save a picture to the album.
(2) The parameter tag is the address of the picture, which is the string type. The content varies depending on the device:
On Android: Tag is a local address, for example: "File:///sdcard/img.png"
On IOS: Tag can be one of the URLs, assets-library, and memory images.
(3) The parameter type is not required, and the optional value is ' photo ' or ' video '. Used to indicate whether a picture or a video is stored. If not specified, the program will also be judged by its suffix. (End with. mov or. mp4 for video, others as pictures)
2.2 cameraroll API iOS link configuration
The first step
Add Cameraroll Library (node_modules/react-native/Libraries/Cameraroll/rctcameraroll.xcodeproj) to Xcode'sLibrariesin Group
The second step
Put the rctcameraroll.xcodeproj under theProductsIn the folder, drag the static library file (. A file) to the Xcode general--linked frameworkslibraries.
The third step
Configure access to the album, and if you do not configure the Privacy-photo Library additions usage description to Info.plist, there will be a flashback situation. Add the following in Info.plist:
1 <key>NSPhotoLibraryAddUsageDescription</key>
2 <string> use album </string>
3 <key>NSPhotoLibraryUsageDescription</key>
4 <string> use album </string>
Android has direct access to the Cameraroll API
1 import { Platform, CameraRoll } from 'react-native';
2 import RNFS from 'react-native-fs';
3, application example
3.1 network image saved to album (Support iOS Android)
Download the Web image and save it to the album:
1 /**
2 * Download web image
3 * @param uri Image Address
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();//Get the current time error
10 let random = String(((Math.random() * 1000000) | 0))//6-bit random number
11 let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //External file, absolute path to the shared directory (android only)
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');
twenty one },
twenty two };
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 ('Save successfully! The address is as follows: \n' + result);
31 }).catch(function(error) {
32 console.log('error', error);
33 // alert ('Save failed!\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 }
Working with instances
1 //Save the picture
2 DownloadImage=(uri)=>{
3 Download.DownloadImage(uri).then((res)=>{
4 if(res.statusCode==200){
5 Toast.show ('Image Saved Successfully')
6 }else{
7 Toast.show ('Image Save Failed')
8 }
9 })
10 .catch((error)=>{
11 Toast.show ('Image Save Failed')
12 console.log(error)
13 })
14 }
3.2 Memory Image saved to album (Support iOS Android)
To save a memory picture to an album:
1 /**
2 * Save image to album
3 * @param ImageUrl Image Address
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('Save successfully! The address is as follows: \n' + result);
14 }).catch(function(error) {
15 console.log('error', error);
16 // alert ('Save failed!\n' + error);
17 });
18 } catch (e) {
19 reject(new Error(e))
20 }
twenty one
twenty two })
twenty three
twenty four }