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?: ( 20 musicItem: IMusic.IMusicItem, 21 musicList?: IMusic.IMusicItem[], 22 ) => void; 23} 24const ITEM_HEIGHT = rpx(120); 25export default function MusicList(props: IMusicListProps) { 26 const {Header, musicList, musicSheet, showIndex, onItemPress} = props; 27 28 return ( 29 <FlatList 30 style={style.wrapper} 31 ListHeaderComponent={Header} 32 data={musicList ?? []} 33 keyExtractor={musicItem => 34 `ml-${musicItem.id}${musicItem.platform}` 35 } 36 getItemLayout={(_, index) => ({ 37 length: ITEM_HEIGHT, 38 offset: ITEM_HEIGHT * index, 39 index, 40 })} 41 renderItem={({index, item: musicItem}) => { 42 return ( 43 <MusicItem 44 musicItem={musicItem} 45 index={showIndex ? index + 1 : undefined} 46 onItemPress={() => { 47 if (onItemPress) { 48 onItemPress(musicItem, musicList); 49 } else { 50 MusicQueue.playWithReplaceQueue( 51 musicItem, 52 musicList ?? [], 53 ); 54 } 55 }} 56 musicSheet={musicSheet} 57 /> 58 ); 59 }} 60 /> 61 ); 62} 63 64const style = StyleSheet.create({ 65 wrapper: { 66 width: rpx(750), 67 }, 68}); 69