1import React from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import MusicSheet from '@/core/musicSheet'; 5import ThemeText from '@/components/base/themeText'; 6import {ImgAsset} from '@/constants/assetsConst'; 7import FastImage from '@/components/base/fastImage'; 8import {useParams} from '@/entry/router'; 9import PlayAllBar from '@/components/base/playAllBar'; 10import useColors from '@/hooks/useColors'; 11 12export default function Header() { 13 const {id = 'favorite'} = useParams<'local-sheet-detail'>(); 14 const sheet = MusicSheet.useSheets(id); 15 const colors = useColors(); 16 17 return ( 18 <View style={{backgroundColor: colors.card}}> 19 <View style={style.content}> 20 <FastImage 21 style={style.coverImg} 22 uri={sheet?.coverImg} 23 emptySrc={ImgAsset.albumDefault} 24 /> 25 <View style={style.details}> 26 <ThemeText fontSize="title">{sheet?.title}</ThemeText> 27 <ThemeText fontColor="textSecondary" fontSize="subTitle"> 28 共{sheet?.musicList.length ?? 0}首 29 </ThemeText> 30 </View> 31 </View> 32 <PlayAllBar 33 musicList={sheet.musicList} 34 sheetName={sheet.title} 35 sheetId={sheet.id} 36 /> 37 </View> 38 ); 39} 40 41const style = StyleSheet.create({ 42 content: { 43 width: '100%', 44 height: rpx(300), 45 paddingHorizontal: rpx(24), 46 flexDirection: 'row', 47 justifyContent: 'flex-start', 48 alignItems: 'center', 49 }, 50 coverImg: { 51 width: rpx(210), 52 height: rpx(210), 53 borderRadius: rpx(24), 54 }, 55 details: { 56 paddingHorizontal: rpx(36), 57 flex: 1, 58 height: rpx(140), 59 justifyContent: 'space-between', 60 }, 61}); 62