1import React from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import MusicSheet from '@/core/musicSheet'; 5import LinearGradient from 'react-native-linear-gradient'; 6import ThemeText from '@/components/base/themeText'; 7import Color from 'color'; 8import {useTheme} from 'react-native-paper'; 9import {ImgAsset} from '@/constants/assetsConst'; 10import FastImage from '@/components/base/fastImage'; 11import {useParams} from '@/entry/router'; 12import PlayAllBar from '@/components/base/playAllBar'; 13 14export default function Header() { 15 const {id = 'favorite'} = useParams<'sheet-detail'>(); 16 const sheet = MusicSheet.useSheets(id); 17 const {colors} = useTheme(); 18 19 return ( 20 <View> 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 <FastImage 29 style={style.coverImg} 30 uri={sheet?.coverImg} 31 emptySrc={ImgAsset.albumDefault} 32 /> 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 <PlayAllBar musicList={sheet.musicList} sheetName={sheet.title} /> 42 </View> 43 ); 44} 45 46const style = StyleSheet.create({ 47 wrapper: { 48 width: '100%', 49 height: rpx(300), 50 justifyContent: 'center', 51 alignItems: 'center', 52 flexDirection: 'row', 53 paddingHorizontal: rpx(24), 54 }, 55 content: { 56 flexDirection: 'row', 57 justifyContent: 'flex-start', 58 alignItems: 'center', 59 flex: 1, 60 }, 61 coverImg: { 62 width: rpx(210), 63 height: rpx(210), 64 borderRadius: rpx(24), 65 }, 66 details: { 67 paddingHorizontal: rpx(36), 68 flex: 1, 69 height: rpx(140), 70 justifyContent: 'space-between', 71 }, 72}); 73