12d2302c5S猫头猫import React from 'react'; 24060c00aS猫头猫import {FlatList, StyleSheet, View} from 'react-native'; 32d2302c5S猫头猫import rpx from '@/utils/rpx'; 4e14deecfS猫头猫import Download from '@/core/download'; 51119c2eaS猫头猫import ListItem from '@/components/base/listItem'; 6ff8df87dS猫头猫import {sizeFormatter} from '@/utils/fileUtils'; 72d2302c5S猫头猫 84060c00aS猫头猫export default function DownloadingList() { 9e14deecfS猫头猫 const downloading = Download.useDownloadingMusic(); 10e14deecfS猫头猫 const pending = Download.usePendingMusic(); 11e14deecfS猫头猫 const progress = Download.useDownloadingProgress(); // progress没有更新同步 12be0a3650S猫头猫 132d2302c5S猫头猫 return ( 142d2302c5S猫头猫 <View style={style.wrapper}> 152d2302c5S猫头猫 <FlatList 16ff8df87dS猫头猫 style={style.downloading} 17be0a3650S猫头猫 data={downloading.concat(pending)} 182d2302c5S猫头猫 keyExtractor={_ => `dl${_.filename}`} 19be0a3650S猫头猫 extraData={progress} 20be0a3650S猫头猫 renderItem={({item, index}) => { 21be0a3650S猫头猫 if (index < downloading.length) { 22ff8df87dS猫头猫 const prog = progress[item.filename]; 23ff8df87dS猫头猫 return ( 24*5589cdf3S猫头猫 <ListItem withHorizontalPadding> 251119c2eaS猫头猫 <ListItem.Content 262d2302c5S猫头猫 title={item.musicItem.title} 271119c2eaS猫头猫 description={`${ 284060c00aS猫头猫 prog?.progress 294060c00aS猫头猫 ? sizeFormatter(prog.progress) 304060c00aS猫头猫 : '-' 314060c00aS猫头猫 } / ${ 321119c2eaS猫头猫 prog?.size 331119c2eaS猫头猫 ? sizeFormatter(prog.size) 341119c2eaS猫头猫 : '-' 354060c00aS猫头猫 }`} 364060c00aS猫头猫 /> 371119c2eaS猫头猫 </ListItem> 38ff8df87dS猫头猫 ); 39be0a3650S猫头猫 } else { 40be0a3650S猫头猫 return ( 41*5589cdf3S猫头猫 <ListItem withHorizontalPadding> 421119c2eaS猫头猫 <ListItem.Content 434060c00aS猫头猫 title={item.musicItem.title} 441119c2eaS猫头猫 description="等待下载" 454060c00aS猫头猫 /> 461119c2eaS猫头猫 </ListItem> 47be0a3650S猫头猫 ); 48be0a3650S猫头猫 } 494060c00aS猫头猫 }} 504060c00aS猫头猫 /> 512d2302c5S猫头猫 </View> 522d2302c5S猫头猫 ); 532d2302c5S猫头猫} 542d2302c5S猫头猫 552d2302c5S猫头猫const style = StyleSheet.create({ 562d2302c5S猫头猫 wrapper: { 572d2302c5S猫头猫 width: rpx(750), 582d2302c5S猫头猫 flex: 1, 592d2302c5S猫头猫 }, 60ff8df87dS猫头猫 downloading: { 61ff8df87dS猫头猫 flexGrow: 0, 62ff8df87dS猫头猫 }, 632d2302c5S猫头猫}); 64