如何从 FlatList 中的 URL 下载多个文件以使用单独的进度条响应本机

如何解决如何从 FlatList 中的 URL 下载多个文件以使用单独的进度条响应本机

我是 react-native 的新手，我想在 FlatList 中使用 URL 下载多个数据，progress bar 单独用于其项目下载过程......在单个文件中它的过程并且进展正常，但是当我尝试下载多个文件时，它不起作用。下载多个文件挂满手机屏幕，无法使用屏幕上的任何其他选项

如何从 URL 下载并在列表中显示百分比

 const DATA = [
{
  id: '0',file_title: 'zero Item',download_file_url: 'http://212.183.159.230/50MB.zip',},{
  id: '1',file_title: 'First Item',]


 <FlatList
      data={DATA}
      horizontal={false}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />


  const renderItem = ({item}) => (
     <Item title={item.file_title} downloadUrl={item.download_file_url} />
 );

const Item = ({title,downloadUrl}) => (
  <View>
    <DownloadItem title={title} downloadUrl={downloadUrl} />
  </View>
);

我还声明了单独的组件供下载

const DownloadItem = ({title,downloadUrl}) => {
const [downloadProgress,setDownloadProgress] = useState(0);
 return (
  <View>
  <View style={style.parentView}>
    <View
      style={{
        height: 55,width: 55,borderRadius: 2,alignItems: 'center',backgroundColor: rendomrGB(),}}>
      <Text style={style.extensionTxt}>
        {getFirstCharacterOfExtensionFromURL(downloadUrl)}
      </Text>
    </View>

    <View>
      <Text style={style.fileTitle}>{title}</Text>
      <Text style={style.fileDesc}>{title}</Text>
      <View style={style.progressView}>
        <Progress.Bar
          style={style.fileDesc}
          progress={downloadProgress}
          width={200}
        />
        <TouchableOpacity
          onPress={() => startDownloadZip(title,downloadUrl)}>
          <Image
            style={style.imgCloseResume}
            source={require('../../assets/close.png')}
          />
        </TouchableOpacity>
      </View>
    </View>
  </View>

  <View style={style.deviderView}></View>
</View>
);



function startDownloadZip(title,downloadUrl) {
const appParentPath = RNFS.DocumentDirectoryPath; 
const appFolderPath = appParentPath + '/MyFiles';

RNFS.mkdir(appFolderPath)
  .then(success => {
    console.log('Folder created!',success);
    background: true,RNFS.downloadFile({
      fromUrl: `${downloadUrl}`,toFile: `${appFolderPath + '/' + title}`,progress: (res: DownloadProgressCallbackResult) => {

        let progresspercent = res.bytesWritten / res.contentLength; // to calculate in percentage
        setDownloadProgress(progresspercent);
      },})
      .promise.then(responce => {
        console.log('file download ',responce);
      })
      .catch(err => {
        console.log('download error',err);
      });
  })
  .catch(err => {
    console.log('mkdir error ',err);
  });
 }
};

解决方法

您可以为您的 renderItem 创建一个独立组件，您可以在其中调用下载进度。我在下面附上一个例子。

function ParentComp() {


  return <FlatList renderItem={({item}) => <ChildComponent item={item} />} />
}

function ChildComponent({item}) {
  const [progress,setProgress] = useState(0)

  "here comes your RNFS logic"

  return <ProgressBar value={progress} />
}