「每日一坑」React Native中文件上传进度展示的问题

每日一坑文章系列用来记录日常工作生活中碰到的问题及可能的（未）解决方案，不限于技术类。

问题

今天碰到并解决的一个问题是在React Native中上传文件时如何显示上传进度条

描述

在RN中上传文件有众多解决方案，基于JS的如：fetch、axios、jsonp 甚至是直接封装XmlHttpRequest，基于原生方案的如：RNFetchBlob和RNFS等。

这里的核心问题是如何获取已上传的数据长度。本项目请求绝大部分采用fetch处理，经过搜寻研究，fetch存在基于Response的ReadableStream解决下载进度的方案，但未发现有比较成熟上传进度方案。

解决

最终选择了基于axios的解决方案，相对比较简单，通过npm安装依赖即可使用。

显示进度条采用的是react-native-progress组件。

交流

欢迎下载【知界】，做有想法的知识体系管理工具。QQ交流：3607274958