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