GitHub链接：
https://github.com/itinance/react-native-fs#readme
-
文件下载保存到本地
-
读取、编辑文件
-
上传文件
-
删除文件
API参考：
pathAPI
```JavaScript
MainBundlePath (String) 主包目录的绝对路径（在 Android 上不可用）
CachesDirectoryPath (String) 缓存目录的绝对路径
ExternalCachesDirectoryPath (String) 外部缓存目录的绝对路径（仅限安卓）
DocumentDirectoryPath (String) 文档目录的绝对路径
DownloadDirectoryPath (String) 下载目录的绝对路径（仅在 android 上）
TemporaryDirectoryPath (String) 临时目录的绝对路径（在 Android 上回退到 Caching-Directory）
LibraryDirectoryPath (String) NSLibraryDirectory 的绝对路径（仅限 iOS）
ExternalDirectoryPath (String) 外部文件的绝对路径，共享目录（仅限安卓）
ExternalStorageDirectoryPath (String) 外部存储的绝对路径，共享目录（仅限安卓）
downloadAPI
```JavaScript
fromUrl：字符串； // 下载文件的 URL
toFile： 字符串； // 将文件保存到的本地文件系统路径
headers？：标题； // 要传递给服务器的标头对象
background？：布尔值； // 应用终止后继续在后台下载（仅限iOS）
discretionary？：布尔值； // 允许操作系统控制下载的时间和速度以提高感知性能（仅限 iOS）
cacheable？：布尔值； // 下载是否可以存储在共享的NSURLCache中（仅限iOS，默认为true）
progressInterval？：数字；
progressDivider？：数字；
begin？：（res：DownloadBeginCallbackResult）=> void；
progress？：（res：DownloadProgressCallbackResult）=> void；
resumable？：（）=> void； // 目前只支持 iOS
connectionTimeout?: number // 目前仅在 Android 上支持
readTimeout?: number // Android 和 iOS 支持
backgroundTimeout?: number // 下载整个资源的最长时间（以毫秒为单位）（仅限 iOS，用于后台下载超时）
util.ts
import RNFS from 'react-native-fs';
// 传入一个url和名字，下载到指定目录
export const downloadTxt = (path:string,name:string)=>{
const installUrl = path;
const filePath = RNFS.ExternalCachesDirectoryPath + `/${name}.txt`
const download = RNFS.downloadFile({
fromUrl: installUrl,
toFile: filePath,
return download.promise
// 创建一个txt
export const createTxt = (name:string,content:string)=>{
const filePath = RNFS.ExternalCachesDirectoryPath + `/${name}.txt`
return RNFS.writeFile(path, content, 'utf8')
// 读取一个txt的内容
export const createTxt = (name:string)=>{
const filePath = RNFS.ExternalCachesDirectoryPath + `/${name}.txt`
return RNFS.readFile(path)
// 编辑一个txt的内容
export const appendTxt = (name:string,content:string)=>{
const filePath = RNFS.ExternalCachesDirectoryPath + `/${name}.txt`
return RNFS. appendFile(path, content, 'utf8')
// 删除这个文件所在的文件夹（Linux rm -rf）
export const deleteTxt = ()=>{
if (RNFS.exists(RNFS.ExternalCachesDirectoryPath)) {
RNFS.unlink(RNFS.ExternalCachesDirectoryPath)
// RNFS.unlink(RNFS.ExternalCachesDirectoryPath+`/${name}.txt`)
// 也可指定文件删除
index.tsx
import React, { useState, useEffect } from 'react';
import RNFS from 'react-native-fs';
import { Button, Toast } from 'react-native'
import { downloadTxt, appendTxt, deleteTxt } from './util.ts';
const fileName = 'test';
const demo = () => {
const [ isdownload, setIsdownload ] = useState<boolean>(false);
useEffect(()=>{
return ()=>{
deleteTxt()
// 界面销毁删除文件夹也可以修改函数实现不删除文件夹
const handleDownloadTxt = () => {
const installUrl = 'http://localhost:8080/test.txt'; // 网络文件
// 这里使用localhost是通过node起了一个服务做静态代理等同于读取到一个网络文件
downloadTxt(installUrl,fileName).then(result=>{
if (result.statusCode === 200) {
console.log('file://' + RNFS.ExternalCachesDirectoryPath + fileName + '.txt')
setIsdownload(true)
const handleAppendTxt = () =>{
if(!isdownload) return Toast.fail('未下载')
appendTxt(fileName,'编辑了这个文件').then(result=>{
console.log('success');
const handleuploadTxt = () => {
const filePath = 'file://' + RNFS.ExternalCachesDirectoryPath +
fileName +'.txt';
// 已经获取到文件路径了，通过指定的方法把这个文件上传到相应的服务器就行了
return (
<Button onPress={handleDownloadTxt}>下载txt</Button>
<Button onPress={handleAppendTxt}>编辑下载好的txt</Button>
<Button onPress={handleuploadTxt}>上传txt</Button>
export default demo
插件：react-native-fsGitHub连接：https://github.com/itinance/react-native-fs#readme实现：文件下载保存到本地 读取、编辑文件 上传文件 删除文件API参考：pathAPI```JavaScriptMainBundlePath (String) 主包目录的绝对路径（在 Android 上不可用）CachesDirectoryPath (String) 缓存目录的绝对路径ExternalCachesDire
前言最近项目有新的需求，做一个类似朋友圈的功能。其中发布动态时就涉及到了图片的上传。
实现## 1.所用的API ##
采用HTML5提供的formData和网络框架axios实现
## 2.具体代码 ##
// 创建一个formData（虚拟表单）
const formData = new FormData();
// 需要上传的文件
const file = { uri: fileUri, t
export const exportImg = function (imgsrc,name) { /* url图片地址，name图片名称 */
// 不跨域
// let alink = document.createElement('a');
// alink.href = url;
// alink.download = name || '图片下载'; //...
选了文件就要上传，这篇就记录一下文件上传
这是antd的一个UI库，不知道的同学自行去学习，选择图片和拍照有时间在补上，他们的上传方法是同一个，还包含了一点点RN和webview的交互以及组件封装调用
https://rn.mobile.an...
react-native-background-upload
唯一具有Android和iOS背景支持的React Native http发布文件上传器。 如果您要上传视频之类的大文件，请使用此功能，以便您的用户可以在长时间上传过程中为您的应用程序添加背景。
注意：将主要版本4与RN 47.0及更高版本一起使用。 如果RN小于47，请使用3.0。 查看所有可用版本： npm show react-native-background-upload versions
1.安装软件包
npm install --save react-native-background-upload
这个库依赖于React Native的HeadlessJS ，目前只支持Android。
在本机端，它使用Firebase JobDispatcher或AlarmManager 。
Firebase JobDispatcher（默认值）：无法准确计划任务...
React-Native 局域网内文件传输小结
我使用的技术栈是：react-native（0.56.0）+ react-navigation + react-redux + ant-design + axios
我在做的ReactNative项目需要实现同一WIFI下跨平台互传文件功能，涉及原生模块的功能
我实现这两个功能使用的库有
@react-native-community/netin...
React Native 文档查看组件：react-native-doc-viewer，可以在手机上直接打开文档，支持远程和本地文档。支持的文档格式：xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。
npm install reac
var file = { uri: response.uri, type: 'multipart/form-data', name: 'image.jpg' }
let formdata = new FormData();
formdata.append(...
首先说下这个问题很坑,append的Js的object类型无效,我们后台用的是java
上错不成功的代码let url = 'http://192.168.1.120:8090/app/release';
let params = {parentId: "0", text: this.state.textContent, postType: 0, profitType: 0}
github链接: https://github.com/itinance/react-native-fs
另外还有一个下载的库 ：https://github.com/wkh237/react-native-fetch-blob
npm install react-native-fs --save
react-native li
import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
image: {
alignSelf: 'center',
const CenteredImage = ({ source }) => (
<View style={styles.container}>
<Image source={source} style={styles.image} />
</View>
export default CenteredImage;
在这个示例中，父容器使用flexbox布局，使得它的子元素在水平和垂直方向都居中。然后，将图片的alignSelf属性设置为'center'，使得图片本身也居中。
