1import React, {useEffect} from 'react'; 2import {AppState, StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {IconButton} from 'react-native-paper'; 5import MusicQueue from '@/common/musicQueue'; 6import {useNavigation} from '@react-navigation/native'; 7import Tag from '@/components/tag'; 8import { fontSizeConst, fontWeightConst } from '@/constants/uiConst'; 9 10interface INavBarProps {} 11export default function NavBar(props: INavBarProps) { 12 const navigation = useNavigation(); 13 const musicItem = MusicQueue.useCurrentMusicItem(); 14 15 return ( 16 <View style={style.wrapper}> 17 <IconButton 18 icon="arrow-left" 19 size={rpx(48)} 20 color="white" 21 onPress={() => { 22 navigation.goBack(); 23 }}></IconButton> 24 <View style={style.headerContent}> 25 <Text numberOfLines={1} style={style.headerTitleText}> 26 {musicItem?.title ?? ''} 27 </Text> 28 <View style={style.headerDesc}> 29 <Text style={style.headerArtistText}>{musicItem?.artist}</Text> 30 <Tag tagName={musicItem?.platform ?? ''}></Tag> 31 </View> 32 </View> 33 <IconButton icon="share" color="white" size={rpx(48)}></IconButton> 34 </View> 35 ); 36} 37 38const style = StyleSheet.create({ 39 wrapper: { 40 width: rpx(750), 41 height: rpx(150), 42 flexDirection: 'row', 43 alignItems: 'center', 44 justifyContent: 'space-between', 45 }, 46 headerContent: { 47 flex: 1, 48 height: rpx(150), 49 justifyContent: 'center', 50 alignItems: 'center', 51 maxWidth: rpx(640), 52 }, 53 headerTitleText: { 54 color: 'white', 55 fontWeight: fontWeightConst.bold, 56 fontSize: fontSizeConst.big, 57 marginBottom: rpx(12), 58 includeFontPadding: false, 59 }, 60 headerDesc: { 61 height: rpx(32), 62 flexDirection: 'row', 63 alignItems: 'center', 64 }, 65 headerArtistText: { 66 color: 'white', 67 fontSize: fontSizeConst.small, 68 includeFontPadding: false, 69 }, 70}); 71