使用react-native-fs从url下载文件,当下载进度百分比达到100%时,我将调用另一个函数。但是,RNFS.downloadFile
不能正确跟踪进度。
_downloadFile = () =>{
const downloadDest = `${RNFS.ExternalDirectoryPath}/Monstro/${((Math.random() * 1000) | 0)}.jpg`;
let DownloadFileOptions = {
fromUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Boothferry_Road%2C_Goole.jpg/220px-Boothferry_Road%2C_Goole.jpg",
toFile: downloadDest,
begin: this._downloadFileBegin,
progress: this._downloadFileProgress,
background:false,
progressDivider:1
};
RNFS.downloadFile(DownloadFileOptions);
}
_downloadFileBegin = () =>{
console.log("Download Begin");
}
_downloadFileProgress = (data) =>{
const percentage = ((100 * data.bytesWritten) / data.contentLength) | 0;
const text = `Progress ${percentage}%`;
console.log(text);
if(percentage == 100) //call another function here
}
并不是每次_downloadFileProgress
中的console.log
都显示Progress 100%
,所以我很难查看进度,是不是我漏掉了一些设置,或者有没有其他方法来跟踪进度
4条答案
按热度按时间f4t66c6m1#
大家好,我按照RFFS npm指导原则使用它来实现
https://www.npmjs.com/package/react-native-fs
对于进度条,我使用了库
React Native Progress Circle
以下代码行的链接
在这里我实现了上面的代码行
sg3maiej2#
RFFS在下载完成时提供回调,请尝试以下操作:
dtcbnfnu3#
您需要在DownloadFileOptions中将其作为进度选项传递:
e1xvtsh34#
实际上,
react-native-fs
库中有一个bug。当你传递progress
函数并想使用下载进度在UI上显示一些东西时,你也必须传递begin
函数。我说这是一个bug,因为
react-native-fs
开发人员可以检查它,如果消费者开发人员传递了progress
而没有传递begin
,他们可以传递noop
函数作为默认属性。您可以阅读此处了解更多信息