RN-第三方之-react-native-fs

本文内容：

react-native-fs的简单使用

http://www.jianshu.com/p/acf5a502f999

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

github链接: https://github.com/itinance/react-native-fs

安装步骤

第一步：

npm install react-native-fs --save

第二步：

react-native link react-native-fs

OK 即可开始使用(不放心的可以按照github上的对比一下)

简单使用

import RNFS from 'react-native-fs';

下载文件

/*下载文件*/    downloadFile() {        // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)        // 图片        // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.jpg`;        // const formUrl = 'http://img.kaiyanapp.com/c7b46c492261a7c19fa880802afe93b3.png?imageMogr2/quality/60/format/jpg';        // 文件        // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.zip`;        // const formUrl = 'http://files.cnblogs.com/zhuqil/UIWebViewDemo.zip';        // 视频        // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.mp4`;        // http://gslb.miaopai.com/stream/SnY~bbkqbi2uLEBMXHxGqnNKqyiG9ub8.mp4?vend=miaopai&        // https://gslb.miaopai.com/stream/BNaEYOL-tEwSrAiYBnPDR03dDlFavoWD.mp4?vend=miaopai&        // const formUrl = 'https://gslb.miaopai.com/stream/9Q5ADAp2v5NHtQIeQT7t461VkNPxvC2T.mp4?vend=miaopai&';        // 音频        const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.mp3`;        // http://wvoice.spriteapp.cn/voice/2015/0902/55e6fc6e4f7b9.mp3        const formUrl = 'http://wvoice.spriteapp.cn/voice/2015/0818/55d2248309b09.mp3';        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;                this.setState({                    progressNum: pro,                });            }        };        try {            const ret = RNFS.downloadFile(options);            ret.promise.then(res => {                console.log('success', res);                console.log('file://' + downloadDest)            }).catch(err => {                console.log('err', err);            });        }        catch (e) {            console.log(error);        }    }

将文本写入本地 txt

 /*将文本写入本地 txt*/    writeFile() {        // create a path you want to write to        const path = RNFS.MainBundlePath + '/test.txt';        // write the file        RNFS.writeFile(path, '这是一段文本，YES', 'utf8')            .then((success) => {                console.log('path', path);            })            .catch((err) => {                console.log(err.message);            });    }

读取txt文件内容

/*读取txt文件内容*/    readFile() {        // create a path you want to delete        const path = RNFS.MainBundlePath + '/test.txt';        return RNFS.readFile(path)            .then((result) => {                console.log(result);                this.setState({                    readTxtResult: result,                })            })            .catch((err) => {                console.log(err.message);            });    }

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

/*在已有的txt上添加新的文本*/    appendFile() {        const path = RNFS.MainBundlePath + '/test.txt';        return RNFS.appendFile(path, '新添加的文本', 'utf8')            .then((success) => {                console.log('success');            })            .catch((err) => {                console.log(err.message);            });    }

删除文件

    /*删除文件*/    deleteFile() {        // create a path you want to delete        const path = RNFS.MainBundlePath + '/test.txt';        return RNFS.unlink(path)            .then(() => {                console.log('FILE DELETED');            })            // `unlink` will throw an error, if the item to unlink does not exist            .catch((err) => {                console.log(err.message);            });    }

上传文件 only iOS

 /*上传文件 only iOS*/    uploadFile() {        const uploadSrc = `${RNFS.MainBundlePath}/test.txt`;        const uploadUrl = 'http://buz.co/rnfs/upload-tester.php';        const options = {            toUrl: uploadUrl,            files: [{name: 'myfile', filename: 'test.txt', filepath: uploadSrc, filetype: 'text/plain'}],            background: true,            method: 'POST', // PUT            begin: (res) => {                console.log('begin', res);            },            progress: (res) => {                console.log('progress', res);            }        };        const ret = RNFS.uploadFiles(options);        return ret.promise.then(res => {            const response = JSON.parse(res.body);            console.log(response);        })            .catch(err => {                console.log('err', err);            });    }

demo:https://github.com/chjwrr/RN-react-native-fs