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 => 31 `ml-${musicItem.id}${musicItem.platform}` 32 } 33 getItemLayout={(_, index) => ({ 34 length: ITEM_HEIGHT, 35 offset: ITEM_HEIGHT * index, 36 index, 37 })} 38 renderItem={({index, item: musicItem}) => { 39 return ( 40 <MusicItem 41 musicItem={musicItem} 42 index={showIndex ? index + 1 : undefined} 43 onItemPress={() => { 44 if (onItemPress) { 45 onItemPress(musicItem); 46 } else { 47 MusicQueue.playWithReplaceQueue( 48 musicItem, 49 musicList ?? [], 50 ); 51 } 52 }} 53 musicSheet={musicSheet} 54 /> 55 ); 56 }} 57 /> 58 ); 59} 60 61const style = StyleSheet.create({ 62 wrapper: { 63 width: rpx(750), 64 }, 65}); 66