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 ThemeText from '@/components/themeText'; 8import Color from 'color'; 9import {useTheme} from 'react-native-paper'; 10 11interface IHeaderProps {} 12export default function Header(props: IHeaderProps) { 13 const route = useRoute<any>(); 14 const id = route.params?.id ?? 'favorite'; 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 <Image 27 style={style.coverImg} 28 source={ 29 sheet?.coverImg 30 ? { 31 uri: sheet.coverImg, 32 } 33 : require('@/assets/imgs/album-default.jpg') 34 }></Image> 35 <View style={style.details}> 36 <ThemeText>{sheet?.title}</ThemeText> 37 <ThemeText fontColor="secondary" fontSize="description"> 38 共{sheet?.musicList.length ?? 0}首 39 </ThemeText> 40 </View> 41 </View> 42 </LinearGradient> 43 ); 44} 45 46const style = StyleSheet.create({ 47 wrapper: { 48 width: rpx(750), 49 height: rpx(300), 50 justifyContent: 'center', 51 alignItems: 'center', 52 flexDirection: 'row', 53 }, 54 content: { 55 width: rpx(702), 56 flexDirection: 'row', 57 justifyContent: 'space-between', 58 alignItems: 'center', 59 }, 60 coverImg: { 61 width: rpx(210), 62 height: rpx(210), 63 borderRadius: rpx(24), 64 }, 65 details: { 66 width: rpx(456), 67 height: rpx(140), 68 justifyContent: 'space-between', 69 }, 70}); 71
