使用react-native-fs从url下载文件,当下载progess百分比达到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
}
并非每次console.log
_downloadFileProgress
显示Progress 100%
,因此我很难检查进度。我是否错过了某些设置,或者还有其他方法可以跟踪进度
答案 0 :(得分:1)
RNFS在下载完成时提供回调,请尝试以下操作:
RNFS.downloadFile(DownloadFileOptions).promise.then((r) => {
//call another function here
});
答案 1 :(得分:0)
您需要在DownloadFileOptions中将此作为进度选项传递:
progress: (data) => this._downloadFileProgress(data)
答案 2 :(得分:0)
嗨,我通过遵循RNFS npm准则来实现此目的
https://www.npmjs.com/package/react-native-fs
对于进度条,我使用了库
downloadFile(options: DownloadFileOptions): { jobId: number, promise: Promise<DownloadResult> }
type DownloadFileOptions = {
fromUrl: string; // URL to download file from
toFile: string; // Local filesystem path to save the file to
headers?: Headers; // An object of headers to be passed to the server
background?: boolean; // Continue the download in the background after the app terminates (iOS only)
discretionary?: boolean; // Allow the OS to control the timing and speed of the download to improve perceived performance (iOS only)
cacheable?: boolean; // Whether the download can be stored in the shared NSURLCache (iOS only, defaults to true)
progressDivider?: number;
begin?: (res: DownloadBeginCallbackResult) => void;
progress?: (res: DownloadProgressCallbackResult) => void;
resumable?: () => void; // only supported on iOS yet
connectionTimeout?: number // only supported on Android yet
readTimeout?: number // supported on Android and iOS
};
此处我实现了上述代码行
RNFS.downloadFile({
fromUrl: encodedfileURL,
toFile: downloadfilePath,
//headers
background: true, **// Continue the download in the background after the app terminates (iOS only)**
discretionary: true, **// Allow the OS to control the timing and speed of the download to improve perceived performance (iOS only)**
cacheable: true, **// Whether the download can be stored in the shared NSURLCache (iOS only, defaults to true)**
begin: (res: DownloadBeginCallbackResult) => {
console.log("Response begin ===\n\n");
console.log(res);
},
progress: (res: DownloadProgressCallbackResult) => {
//here you can calculate your progress for file download
console.log("Response written ===\n\n");
let progressPercent = (res.bytesWritten / res.contentLength)*100; // to calculate in percentage
console.log("\n\nprogress===",progressPercent)
this.setState({ progress: progressPercent.toString() });
item.downloadProgress = progressPercent;
console.log(res);
}
})
.promise.then(res => {
console.log("res for saving file===", res);
return RNFS.readFile(downloadfilePath, "base64");
})