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