1import React from 'react'; 2import {FlatList, StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import Download from '@/core/download'; 5import ListItem from '@/components/base/listItem'; 6import {sizeFormatter} from '@/utils/fileUtils'; 7 8interface IDownloadingListProps {} 9export default function DownloadingList(props: IDownloadingListProps) { 10 const downloading = Download.useDownloadingMusic(); 11 const pending = Download.usePendingMusic(); 12 const progress = Download.useDownloadingProgress(); // progress没有更新同步 13 14 return ( 15 <View style={style.wrapper}> 16 <FlatList 17 style={style.downloading} 18 data={downloading.concat(pending)} 19 keyExtractor={_ => `dl${_.filename}`} 20 extraData={progress} 21 renderItem={({item, index}) => { 22 if (index < downloading.length) { 23 const prog = progress[item.filename]; 24 return ( 25 <ListItem 26 title={item.musicItem.title} 27 desc={`${ 28 prog?.progress ? sizeFormatter(prog.progress) : '-' 29 } / ${prog?.size ? sizeFormatter(prog.size) : '-'}`}></ListItem> 30 ); 31 } else { 32 return ( 33 <ListItem title={item.musicItem.title} desc="等待下载"></ListItem> 34 ); 35 } 36 }}></FlatList> 37 </View> 38 ); 39} 40 41const style = StyleSheet.create({ 42 wrapper: { 43 width: rpx(750), 44 flex: 1, 45 }, 46 downloading: { 47 flexGrow: 0, 48 }, 49}); 50