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