xref: /MusicFree/src/pages/musicDetail/components/navBar.tsx (revision ec26b76829169f3fa0606bb9b21624aad61d6594)
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