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 musicList={sheet.musicList} musicSheet={sheet} /> 33 </View> 34 ); 35} 36 37const style = StyleSheet.create({ 38 content: { 39 width: '100%', 40 height: rpx(300), 41 paddingHorizontal: rpx(24), 42 flexDirection: 'row', 43 justifyContent: 'flex-start', 44 alignItems: 'center', 45 }, 46 coverImg: { 47 width: rpx(210), 48 height: rpx(210), 49 borderRadius: rpx(24), 50 }, 51 details: { 52 paddingHorizontal: rpx(36), 53 flex: 1, 54 height: rpx(140), 55 justifyContent: 'space-between', 56 }, 57}); 58