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