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