12d2302c5S猫头猫import React from 'react'; 22d2302c5S猫头猫import {FlatList, StyleSheet, Text, View} from 'react-native'; 32d2302c5S猫头猫import rpx from '@/utils/rpx'; 42d2302c5S猫头猫import DownloadManager from '@/common/downloadManager'; 52d2302c5S猫头猫import ListItem from '@/components/base/listItem'; 6*ff8df87dS猫头猫import {sizeFormatter} from '@/utils/fileUtils'; 72d2302c5S猫头猫 82d2302c5S猫头猫interface IDownloadingListProps {} 92d2302c5S猫头猫export default function DownloadingList(props: IDownloadingListProps) { 102d2302c5S猫头猫 const downloading = DownloadManager.useDownloadingMusic(); 112d2302c5S猫头猫 const pending = DownloadManager.usePendingMusic(); 12*ff8df87dS猫头猫 const progress = DownloadManager.useDownloadingProgress(); // progress没有更新同步 132d2302c5S猫头猫 return ( 142d2302c5S猫头猫 <View style={style.wrapper}> 152d2302c5S猫头猫 <FlatList 16*ff8df87dS猫头猫 style={style.downloading} 172d2302c5S猫头猫 data={downloading} 182d2302c5S猫头猫 keyExtractor={_ => `dl${_.filename}`} 19*ff8df87dS猫头猫 renderItem={({item}) => { 20*ff8df87dS猫头猫 const prog = progress[item.filename]; 21*ff8df87dS猫头猫 return ( 222d2302c5S猫头猫 <ListItem 232d2302c5S猫头猫 title={item.musicItem.title} 24*ff8df87dS猫头猫 desc={`${prog?.progress ? sizeFormatter(prog.progress) : '-'} / ${ 25*ff8df87dS猫头猫 prog?.size ? sizeFormatter(prog.size) : '-' 262d2302c5S猫头猫 }`}></ListItem> 27*ff8df87dS猫头猫 ); 28*ff8df87dS猫头猫 }}></FlatList> 292d2302c5S猫头猫 <FlatList 302d2302c5S猫头猫 data={pending} 312d2302c5S猫头猫 keyExtractor={_ => `pd${_.filename}`} 322d2302c5S猫头猫 renderItem={({item}) => ( 332d2302c5S猫头猫 <ListItem title={item.musicItem.title} desc="等待下载"></ListItem> 342d2302c5S猫头猫 )}></FlatList> 352d2302c5S猫头猫 </View> 362d2302c5S猫头猫 ); 372d2302c5S猫头猫} 382d2302c5S猫头猫 392d2302c5S猫头猫const style = StyleSheet.create({ 402d2302c5S猫头猫 wrapper: { 412d2302c5S猫头猫 width: rpx(750), 422d2302c5S猫头猫 flex: 1, 432d2302c5S猫头猫 }, 44*ff8df87dS猫头猫 downloading: { 45*ff8df87dS猫头猫 flexGrow: 0, 46*ff8df87dS猫头猫 }, 472d2302c5S猫头猫}); 48