xref: /MusicFree/src/pages/musicDetail/components/navBar.tsx (revision 15a52c01d4ac71a8f54e90091a77cbf2361a75d8) 
1import React from 'react';
2import {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';
9// import useShare from '@/components/share/useShare';
10import Toast from '@/utils/toast';
11
12export default function NavBar() {
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                }}
26            />
27            <View style={style.headerContent}>
28                <Text numberOfLines={1} style={style.headerTitleText}>
29                    {musicItem?.title ?? '无音乐'}
30                </Text>
31                <View style={style.headerDesc}>
32                    <Text style={style.headerArtistText}>
33                        {musicItem?.artist}
34                    </Text>
35                    {musicItem?.platform ? (
36                        <Tag tagName={musicItem.platform} />
37                    ) : null}
38                </View>
39            </View>
40            <IconButton
41                icon="share"
42                color="white"
43                size={rpx(48)}
44                onPress={() => {
45                    Toast.warn('还没做好...再等等吧');
46                    // showShare({
47                    //     content: {
48                    //         type: 'ShareMusic',
49                    //         track: {
50                    //             id: musicItem?.id,
51                    //             platform: musicItem?.platform,
52                    //         },
53                    //     },
54                    //     title: musicItem?.title,
55                    //     desc: musicItem?.artist,
56                    // });
57                }}
58            />
59        </View>
60    );
61}
62
63const style = StyleSheet.create({
64    wrapper: {
65        width: rpx(750),
66        height: rpx(150),
67        flexDirection: 'row',
68        alignItems: 'center',
69        justifyContent: 'space-between',
70    },
71    headerContent: {
72        flex: 1,
73        height: rpx(150),
74        justifyContent: 'center',
75        alignItems: 'center',
76        maxWidth: rpx(640),
77    },
78    headerTitleText: {
79        color: 'white',
80        fontWeight: fontWeightConst.semibold,
81        fontSize: fontSizeConst.title,
82        marginBottom: rpx(12),
83        includeFontPadding: false,
84    },
85    headerDesc: {
86        height: rpx(32),
87        flexDirection: 'row',
88        alignItems: 'center',
89    },
90    headerArtistText: {
91        color: 'white',
92        fontSize: fontSizeConst.subTitle,
93        includeFontPadding: false,
94        maxWidth: rpx(540),
95    },
96});
97