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

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

一,需求分析

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

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

二,简单介绍

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

• 将文本写入本地 txt
• 读取txt文件内容
• 在已有的txt上添加新的文本
• 删除文件
• 下载文件(图片、文件、视频、音频)
• 上传文件 only iOS

三,使用实例

    3.1 将文本写入本地 txt

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

    3.2 读取txt文件内容

 let rnfsPath = Platform.OS === 'ios'? RNFS.LibraryDirectoryPath:RNFS.ExternalDirectoryPath
        const path =  rnfsPath+ '/keystore_'+.uid+'.txt';
        //alert(RNFS.CachesDirectoryPath)
        return RNFS.readFile(path)
            .then((result) => {
                Toast.show('读取成功')
            })
        .catch((err) => {
           //alert(err.message);
            Toast.show('读取失败');
        });

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

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

    3.4 删除文件

 /*删除文件*/
    deleteFile() {
        // create a path you want to delete
        let rnfsPath = Platform.OS === 'ios'? RNFS.LibraryDirectoryPath:RNFS.ExternalDirectoryPath
        const path =  rnfsPath+ '/test_'+uid+'.txt';
        return RNFS.unlink(path)
            .then(() => {
               //alert('FILE DELETED');
            })
            .catch((err) => {
                //console.log(err.message);
            });
    }

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

export const downloadFile =(uri,callback)=> {
    if (!uri) return null;
    return new Promise((resolve, reject) => {
        let timestamp = (new Date()).getTime();//获取当前时间错
        let random = String(((Math.random() * 1000000) | 0))//六位随机数
        let dirs = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath; //外部文件，共享目录的绝对路径（仅限android）
        const downloadDest = `${dirs}/${timestamp+random}.jpg`;
        //const downloadDest = `${dirs}/${timestamp+random}.zip`;
         //const downloadDest = `${dirs}/${timestamp+random}.mp4`;
          //const downloadDest = `${dirs}/${timestamp+random}.mp3`;
        const formUrl = uri;
        const options = {
            fromUrl: formUrl,
            toFile: downloadDest,
            background: true,
            begin: (res) => {
                // console.log('begin', res);
                // console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');
            },
progress: (res) => {
                let pro = res.bytesWritten / res.contentLength;
               callback(pro);//下载进度
            }

        };
        try {
            const ret = RNFS.downloadFile(options);
            ret.promise.then(res => {
                // console.log('success', res);
                // console.log('file://' + downloadDest)
                var promise = CameraRoll.saveToCameraRoll(downloadDest);
                promise.then(function(result) {
                   // alert('保存成功！地址如下：\n' + result);
                }).catch(function(error) {
                     console.log('error', error);
                    // alert('保存失败！\n' + error);
                });
                resolve(res);
            }).catch(err => {
                reject(new Error(err))
            });
        } catch (e) {
            reject(new Error(e))
        }

    })

}

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

var uploadUrl = 'http://requestb.in/XXXXXXX';  // For testing purposes, go to http://requestb.in/ and create your own link
// create an array of objects of the files you want to upload
var files = [
  {
    name: 'test1',
    filename: 'test1.w4a',
    filepath: RNFS.DocumentDirectoryPath + '/test1.w4a',
    filetype: 'audio/x-m4a'
  }, {
    name: 'test2',
    filename: 'test2.w4a',
    filepath: RNFS.DocumentDirectoryPath + '/test2.w4a',
    filetype: 'audio/x-m4a'
  }
];

var uploadBegin = (response) => {
  var jobId = response.jobId;
  console.log('UPLOAD HAS BEGUN! JobId: ' + jobId);
};

var uploadProgress = (response) => {
  var percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100);
  console.log('UPLOAD IS ' + percentage + '% DONE!');
};

// upload files
RNFS.uploadFiles({
  toUrl: uploadUrl,
  files: files,
  method: 'POST',
  headers: {
    'Accept': 'application/json',
  },
  fields: {
    'hello': 'world',
  },
  begin: uploadBegin,
  progress: uploadProgress
}).promise.then((response) => {
    if (response.statusCode == 200) {
      console.log('FILES UPLOADED!'); // response.statusCode, response.headers, response.body
    } else {
      console.log('SERVER ERROR');
    }
  })
  .catch((err) => {
    if(err.description === "cancelled") {
      // cancelled by user
    }
    console.log(err);
  });