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 withHorizontalPadding> 25 <ListItem.Content 26 title={item.musicItem.title} 27 description={`${ 28 prog?.progress 29 ? sizeFormatter(prog.progress) 30 : '-' 31 } / ${ 32 prog?.size 33 ? sizeFormatter(prog.size) 34 : '-' 35 }`} 36 /> 37 </ListItem> 38 ); 39 } else { 40 return ( 41 <ListItem withHorizontalPadding> 42 <ListItem.Content 43 title={item.musicItem.title} 44 description="等待下载" 45 /> 46 </ListItem> 47 ); 48 } 49 }} 50 /> 51 </View> 52 ); 53} 54 55const style = StyleSheet.create({ 56 wrapper: { 57 width: rpx(750), 58 flex: 1, 59 }, 60 downloading: { 61 flexGrow: 0, 62 }, 63}); 64