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