1import React from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import MusicSheet from '@/core/musicSheet'; 5import LinearGradient from 'react-native-linear-gradient'; 6import ThemeText from '@/components/base/themeText'; 7import Color from 'color'; 8import {useTheme} from 'react-native-paper'; 9import {ImgAsset} from '@/constants/assetsConst'; 10import FastImage from '@/components/base/fastImage'; 11import {useParams} from '@/entry/router'; 12 13export default function Header() { 14 const {id = 'favorite'} = useParams<'sheet-detail'>(); 15 const sheet = MusicSheet.useSheets(id); 16 const {colors} = useTheme(); 17 18 return ( 19 <LinearGradient 20 colors={[ 21 Color(colors.primary).alpha(0.8).toString(), 22 Color(colors.primary).alpha(0.15).toString(), 23 ]} 24 style={style.wrapper}> 25 <View style={style.content}> 26 <FastImage 27 style={style.coverImg} 28 uri={sheet?.coverImg} 29 emptySrc={ImgAsset.albumDefault} 30 /> 31 <View style={style.details}> 32 <ThemeText fontSize="title">{sheet?.title}</ThemeText> 33 <ThemeText fontColor="secondary" fontSize="subTitle"> 34 共{sheet?.musicList.length ?? 0}首 35 </ThemeText> 36 </View> 37 </View> 38 </LinearGradient> 39 ); 40} 41 42const style = StyleSheet.create({ 43 wrapper: { 44 width: rpx(750), 45 height: rpx(300), 46 justifyContent: 'center', 47 alignItems: 'center', 48 flexDirection: 'row', 49 }, 50 content: { 51 width: rpx(702), 52 flexDirection: 'row', 53 justifyContent: 'space-between', 54 alignItems: 'center', 55 }, 56 coverImg: { 57 width: rpx(210), 58 height: rpx(210), 59 borderRadius: rpx(24), 60 }, 61 details: { 62 width: rpx(456), 63 height: rpx(140), 64 justifyContent: 'space-between', 65 }, 66}); 67