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