反应:如何在下载文件时显示进度

Question

要求 - 我想显示一个渐进式指示器，显示已完成的加载百分比。我已经使用了API服务调用。是否有可能以任何方式获得下载完成的百分比？或任何第三方库？

Answer 1

我已经解决了这个问题这是我使用rn-fetch-blob

的NPM

downloadFile() {
  let dirs = RNFetchBlob.fs.dirs;
  const filePath = `${dirs.DocumentDir}`;
  var filename = this.state.invoiceUrl.substring(this.state.invoiceUrl.lastIndexOf('/')+1);
  RNFetchBlob.config({
      path:`${dirs.DownloadDir}/${filename}`,
      fileCache:false
      // addAndroidDownloads: {
      //     notification : true,
      //     useDownloadManager : true,
      //     description: 'TaxiJo Payment Invoice',
      //     mime:'application/pdf',
      //     mediaScannable:true,
      //     path:`${dirs.DownloadDir}/${filename}`
      // },
  })
  .fetch('GET',this.state.invoiceUrl,{
      'Cache-Control' : 'no-store'
  })
  .progress({ interval: 250 },(received,total)=>{
      console.log('progress',received/total);
      this.setState({
          downloadProgress:(received/total)*100
      })
  })
  .then(res=>{
      // RNFetchBlob.fs.stat(res.path()).then(stats=>{
      //     console.log(stats);
      // }).catch(err=>{
      //     console.log('error while getting mimetypes');
      // })
      this.setState({
          downloadProgress:0
      })
      // RNFetchBlob.fs.exists(res.path()).then(exist=>{
      //     console.log(`file ${exist ? '' : 'not'} exists`)
      // }).catch(
      //     err=>console.log('error while checking existance',err)
      // );
      if(Platform.OS === 'ios'){
          RNFetchBlob.ios.openDocument(res.path());
      }else{
          RNFetchBlob.android.actionViewIntent(res.path(),"application/pdf");
      }
  })
  .catch((errorMessage,statusCode)=>{
      console.log("error with downloading file",errorMessage)
  })
}

Answer 2

如果您想显示任何图像的下载进度，则可以使用" react-native-fetch-blob"。请参阅下面的URL了解更多

https://www.npmjs.com/package/reaeact-native-fetch-blob

Answer 3

您可以使用React-Native JS教练找到特定搜索的软件包数量。

喜欢进度您可以从此链接中使用：https://js.coach/reaeact-native/reaeact-native-progress?search=progress

所有都是第三方软件包。