React Native之本地文件系统访问组件react-native-fs的介绍与使用

一,需求分析

    1,需要将图片保存到本地相册；

    2,需要创建文件,并对其进行读写 删除操作。 

二,简单介绍

react-native-fs支持以下功能(ios android)：

• 将文本写入本地 txt

• 读取txt文件内容

• 在已有的txt上添加新的文本

• 删除文件

• 下载文件(图片、文件、视频、音频)

• 上传文件 only iOS

三,使用实例

    3.1 将文本写入本地 txt

 1  let rnfsPath = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath 2         const path = rnfsPath + '/test_' +uid + '.txt'; 3         //write the file 4         RNFS.writeFile(path, test, 'utf8') 5             .then((success) => { 6                 alert('path=' + path); 7             }) 8             .catch((err) => { 9                console.log(err)10 });

    3.2 读取txt文件内容

 1  let rnfsPath = Platform.OS === 'ios'? RNFS.LibraryDirectoryPath:RNFS.ExternalDirectoryPath 2         const path =  rnfsPath+ '/keystore_'+.uid+'.txt'; 3         //alert(RNFS.CachesDirectoryPath) 4         return RNFS.readFile(path) 5             .then((result) => { 6                 Toast.show('读取成功') 7             }) 8         .catch((err) => { 9            //alert(err.message);10             Toast.show('读取失败');11         });

    3.3 在已有的txt上添加新的文本

 1 /*在已有的txt上添加新的文本*/ 2     appendFile() { 3       let rnfsPath = Platform.OS === 'ios'? RNFS.LibraryDirectoryPath:RNFS.ExternalDirectoryPath 4          const path =  rnfsPath+ '/test_'+uid+'.txt'; 5         return RNFS.appendFile(path, '新添加的文本', 'utf8') 6             .then((success) => { 7                 console.log('success'); 8             }) 9             .catch((err) => {10                 console.log(err.message);11             });12     }

    3.4 删除文件

 1  /*删除文件*/ 2     deleteFile() { 3         // create a path you want to delete 4         let rnfsPath = Platform.OS === 'ios'? RNFS.LibraryDirectoryPath:RNFS.ExternalDirectoryPath 5         const path =  rnfsPath+ '/test_'+uid+'.txt'; 6         return RNFS.unlink(path) 7             .then(() => { 8                //alert('FILE DELETED'); 9             })10             .catch((err) => {11                 //console.log(err.message);12             });13     }

3.5 下载文件(图片、文件、视频、音频)

 1 export const downloadFile =(uri,callback)=> { 2     if (!uri) return null; 3     return new Promise((resolve, reject) => { 4         let timestamp = (new Date()).getTime();//获取当前时间错 5         let random = String(((Math.random() * 1000000) | 0))//六位随机数 6         let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //外部文件，共享目录的绝对路径（仅限android） 7         const downloadDest = `${dirs}/${timestamp+random}.jpg`; 8         //const downloadDest = `${dirs}/${timestamp+random}.zip`; 9          //const downloadDest = `${dirs}/${timestamp+random}.mp4`;10           //const downloadDest = `${dirs}/${timestamp+random}.mp3`;11         const formUrl = uri;12         const options = {13             fromUrl: formUrl,14             toFile: downloadDest,15             background: true,16             begin: (res) => {17                 // console.log('begin', res);18                 // console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');19             },20 progress: (res) => {21                 let pro = res.bytesWritten / res.contentLength;22                callback(pro);//下载进度23             }24 25         };26         try {27             const ret = RNFS.downloadFile(options);28             ret.promise.then(res => {29                 // console.log('success', res);30                 // console.log('file://' + downloadDest)31                 var promise = CameraRoll.saveToCameraRoll(downloadDest);32                 promise.then(function(result) {33                    // alert('保存成功！地址如下：\n' + result);34                 }).catch(function(error) {35                      console.log('error', error);36                     // alert('保存失败！\n' + error);37                 });38                 resolve(res);39             }).catch(err => {40                 reject(new Error(err))41             });42         } catch (e) {43             reject(new Error(e))44         }45 46     })47 48 }

3.6 上传文件 only iOS(官网实例)

 1 var uploadUrl = 'http://requestb.in/XXXXXXX';  // For testing purposes, go to http://requestb.in/ and create your own link 2 // create an array of objects of the files you want to upload 3 var files = [ 4   { 5     name: 'test1', 6     filename: 'test1.w4a', 7     filepath: RNFS.DocumentDirectoryPath + '/test1.w4a', 8     filetype: 'audio/x-m4a' 9   }, {10     name: 'test2',11     filename: 'test2.w4a',12     filepath: RNFS.DocumentDirectoryPath + '/test2.w4a',13     filetype: 'audio/x-m4a'14   }15 ];16 17 var uploadBegin = (response) => {18   var jobId = response.jobId;19   console.log('UPLOAD HAS BEGUN! JobId: ' + jobId);20 };21 22 var uploadProgress = (response) => {23   var percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100);24   console.log('UPLOAD IS ' + percentage + '% DONE!');25 };26 27 // upload files28 RNFS.uploadFiles({29   toUrl: uploadUrl,30   files: files,31   method: 'POST',32   headers: {33     'Accept': 'application/json',34   },35   fields: {36     'hello': 'world',37   },38   begin: uploadBegin,39   progress: uploadProgress40 }).promise.then((response) => {41     if (response.statusCode == 200) {42       console.log('FILES UPLOADED!'); // response.statusCode, response.headers, response.body43     } else {44       console.log('SERVER ERROR');45     }46   })47   .catch((err) => {48     if(err.description === "cancelled") {49       // cancelled by user50     }51     console.log(err);52   });

原文出处：https://www.cnblogs.com/jackson-zhangjiang/p/9554611.html