1import React from 'react'; 2import {StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {useRoute} from '@react-navigation/native'; 5import MusicSheet from '@/common/musicSheetManager'; 6import LinearGradient from 'react-native-linear-gradient'; 7import ThemeText from '@/components/themeText'; 8import Color from 'color'; 9import {useTheme} from 'react-native-paper'; 10import Image from '@/components/image'; 11import { ImgAsset } from '@/constants/assetsConst'; 12 13interface IHeaderProps {} 14export default function Header(props: IHeaderProps) { 15 const route = useRoute<any>(); 16 const id = route.params?.id ?? 'favorite'; 17 const sheet = MusicSheet.useSheets(id); 18 const {colors} = useTheme(); 19 20 return ( 21 <LinearGradient 22 colors={[ 23 Color(colors.primary).alpha(0.8).toString(), 24 Color(colors.primary).alpha(0.15).toString(), 25 ]} 26 style={style.wrapper}> 27 <View style={style.content}> 28 <Image 29 style={style.coverImg} 30 uri={sheet?.coverImg} 31 fallback={ImgAsset.albumDefault}></Image> 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