1import React from 'react'; 2import {Image, StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {useRoute} from '@react-navigation/native'; 5import MusicSheet from '@/common/musicSheet'; 6import LinearGradient from 'react-native-linear-gradient'; 7import {fontSizeConst} from '@/constants/uiConst'; 8import ThemeText from '@/components/themeText'; 9import Color from 'color'; 10import {useTheme} from 'react-native-paper'; 11 12interface IHeaderProps {} 13export default function Header(props: IHeaderProps) { 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 <Image 28 style={style.coverImg} 29 source={ 30 sheet?.coverImg 31 ? { 32 uri: sheet.coverImg, 33 } 34 : require('@/assets/imgs/album-default.jpg') 35 }></Image> 36 <View style={style.details}> 37 <ThemeText style={style.title}>{sheet?.title}</ThemeText> 38 <ThemeText type="secondary" style={style.desc}> 39 共{sheet?.musicList.length ?? 0}首 40 </ThemeText> 41 </View> 42 </View> 43 </LinearGradient> 44 ); 45} 46 47const style = StyleSheet.create({ 48 wrapper: { 49 width: rpx(750), 50 height: rpx(300), 51 justifyContent: 'center', 52 alignItems: 'center', 53 flexDirection: 'row', 54 }, 55 content: { 56 width: rpx(702), 57 flexDirection: 'row', 58 justifyContent: 'space-between', 59 alignItems: 'center', 60 }, 61 coverImg: { 62 width: rpx(210), 63 height: rpx(210), 64 borderRadius: rpx(24), 65 }, 66 title: { 67 fontSize: fontSizeConst.normal, 68 }, 69 details: { 70 width: rpx(456), 71 height: rpx(140), 72 justifyContent: 'space-between', 73 }, 74 desc: { 75 fontSize: fontSizeConst.small, 76 }, 77}); 78
