1import React from 'react'; 2import {FlatListProps} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import MusicQueue from '@/core/musicQueue'; 5 6import MusicItem from '../mediaItem/musicItem'; 7import Empty from '../base/empty'; 8import {FlashList} from '@shopify/flash-list'; 9 10interface IMusicListProps { 11 /** 顶部 */ 12 Header?: FlatListProps<IMusic.IMusicItem>['ListHeaderComponent']; 13 /** 音乐列表 */ 14 musicList?: IMusic.IMusicItem[]; 15 /** 所在歌单 */ 16 musicSheet?: IMusic.IMusicSheetItem; 17 /** 是否展示序号 */ 18 showIndex?: boolean; 19 /** 点击 */ 20 onItemPress?: ( 21 musicItem: IMusic.IMusicItem, 22 musicList?: IMusic.IMusicItem[], 23 ) => void; 24} 25const ITEM_HEIGHT = rpx(120); 26 27/** 音乐列表 */ 28export default function MusicList(props: IMusicListProps) { 29 const {Header, musicList, musicSheet, showIndex, onItemPress} = props; 30 31 return ( 32 <FlashList 33 ListHeaderComponent={Header} 34 ListEmptyComponent={Empty} 35 data={musicList ?? []} 36 keyExtractor={musicItem => 37 `ml-${musicItem.id}${musicItem.platform}` 38 } 39 estimatedItemSize={ITEM_HEIGHT} 40 renderItem={({index, item: musicItem}) => { 41 return ( 42 <MusicItem 43 musicItem={musicItem} 44 index={showIndex ? index + 1 : undefined} 45 onItemPress={() => { 46 if (onItemPress) { 47 onItemPress(musicItem, musicList); 48 } else { 49 MusicQueue.playWithReplaceQueue( 50 musicItem, 51 musicList ?? [], 52 ); 53 } 54 }} 55 musicSheet={musicSheet} 56 /> 57 ); 58 }} 59 /> 60 ); 61} 62