美文网首页React NativeRN-第三方控件示例React-Native实践
RN-第三方之-react-native-fs 文件下载、文本存

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

作者: 精神病患者link常 | 来源:发表于2017-06-22 15:24 被阅读6692次

    本文内容:

    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)
    
                }).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

    相关文章

      网友评论

      • 依旧恋夕阳:Android 真机 在上面给的这个目录RNFS.DocumentDirectoryPath下找不到文件,直接指定sdcard目录就能找到文件,请作者指点一下
        依旧恋夕阳:@唯璨 我的解决了 RNFS.MainBundlePath这个路径是ios的Android不能用
        Android的用这个路径RNFS.ExternalDirectoryPath(DocumentDirectoryPath的数据似乎是只有root机器之后才能看到,而ExternalDirectoryPath才是挂载的外置存储,可被用户随意查看)
        118f580d214d:你的问题解决了吗?是不是他发的过程不全啊?${RNFS.MainBundlePath}我的这个抛出来数未定义的
      • 21c84aaa11f3:下载的时候会卡死进程吗?我的直接卡住不能进行别的操作,有解决方法吗
        21c84aaa11f3:@姬玉鹏 让它自己下就好了,不能时时刷新
        892c25ebfe37:卡住的问题解决了吗
      • 蓝精灵112:下载的文件路径
      • Sxiaobai:react-native-fs和 react-native-fetch-blob有啥区别啊

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

      本文链接:https://www.haomeiwen.com/subject/pfetcxtx.html