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'; 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 uri={sheet?.coverImg} 30 fallback={require('@/assets/imgs/album-default.jpg')}></Image> 31 <View style={style.details}> 32 <ThemeText fontSize='title'>{sheet?.title}</ThemeText> 33 <ThemeText fontColor="secondary" fontSize="subTitle"> 34 共{sheet?.musicList.length ?? 0}首 35 </ThemeText> 36 </View> 37 </View> 38 </LinearGradient> 39 ); 40} 41 42const style = StyleSheet.create({ 43 wrapper: { 44 width: rpx(750), 45 height: rpx(300), 46 justifyContent: 'center', 47 alignItems: 'center', 48 flexDirection: 'row', 49 }, 50 content: { 51 width: rpx(702), 52 flexDirection: 'row', 53 justifyContent: 'space-between', 54 alignItems: 'center', 55 }, 56 coverImg: { 57 width: rpx(210), 58 height: rpx(210), 59 borderRadius: rpx(24), 60 }, 61 details: { 62 width: rpx(456), 63 height: rpx(140), 64 justifyContent: 'space-between', 65 }, 66}); 67
