RN-第三方之-react-native-fs 文件下载、文本存储

本文内容:

react-native-fs的简单使用

  • 下载文件(图片、文件、视频、音频)
  • 将文本写入本地 txt
  • 读取txt文件内容
  • 在已有的txt上添加新的文本
  • 上传文件 only iOS
  • github链接: https://github.com/itinance/react-native-fs

    另外还有一个下载的库 : https://github.com/wkh237/react-native-fetch-blob

    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)
                    // 例如保存图片
                    CameraRoll.saveToCameraRoll(downloadDest)
                        .then(()=>{
                            Toast.showShortCenter('图片已保存到相册')
                        }).catch(()=>{
                            Toast.showShortCenter('图片保存失败')
                }).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 => {