xref: /MusicFree/src/pages/musicDetail/components/navBar.tsx (revision d1a36a67ac3d03c61d8bafd8ac2bc121ea4f6f3e) 
1import React from 'react';
2import {StyleSheet, Text, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {useNavigation} from '@react-navigation/native';
5import Tag from '@/components/base/tag';
6import {fontSizeConst, fontWeightConst} from '@/constants/uiConst';
7import Share from 'react-native-share';
8import {B64Asset} from '@/constants/assetsConst';
9import IconButton from '@/components/base/iconButton';
10import TrackPlayer from '@/core/trackPlayer';
11
12export default function NavBar() {
13    const navigation = useNavigation();
14    const musicItem = TrackPlayer.useCurrentMusic();
15    // const {showShare} = useShare();
16
17    return (
18        <View style={styles.container}>
19            <IconButton
20                name="arrow-left"
21                sizeType={'normal'}
22                color="white"
23                style={styles.button}
24                onPress={() => {
25                    navigation.goBack();
26                }}
27            />
28            <View style={styles.headerContent}>
29                <Text numberOfLines={1} style={styles.headerTitleText}>
30                    {musicItem?.title ?? '无音乐'}
31                </Text>
32                <View style={styles.headerDesc}>
33                    <Text style={styles.headerArtistText} numberOfLines={1}>
34                        {musicItem?.artist}
35                    </Text>
36                    {musicItem?.platform ? (
37                        <Tag
38                            tagName={musicItem.platform}
39                            containerStyle={styles.tagBg}
40                            style={styles.tagText}
41                        />
42                    ) : null}
43                </View>
44            </View>
45            <IconButton
46                name="share"
47                color="white"
48                sizeType="normal"
49                style={styles.button}
50                onPress={async () => {
51                    try {
52                        await Share.open({
53                            type: 'image/jpeg',
54                            title: 'MusicFree-一个插件化的免费音乐播放器',
55                            message: 'MusicFree-一个插件化的免费音乐播放器',
56                            url: B64Asset.share,
57                            subject: 'MusicFree分享',
58                        });
59                    } catch {}
60                }}
61            />
62        </View>
63    );
64}
65
66const styles = StyleSheet.create({
67    container: {
68        width: '100%',
69        height: rpx(150),
70        flexDirection: 'row',
71        alignItems: 'center',
72        justifyContent: 'space-between',
73    },
74    button: {
75        marginHorizontal: rpx(24),
76    },
77    headerContent: {
78        flex: 1,
79        height: rpx(150),
80        justifyContent: 'center',
81        alignItems: 'center',
82    },
83    headerTitleText: {
84        color: 'white',
85        fontWeight: fontWeightConst.semibold,
86        fontSize: fontSizeConst.title,
87        marginBottom: rpx(12),
88        includeFontPadding: false,
89    },
90    headerDesc: {
91        height: rpx(32),
92        flexDirection: 'row',
93        alignItems: 'center',
94        paddingHorizontal: rpx(40),
95    },
96    headerArtistText: {
97        color: 'white',
98        fontSize: fontSizeConst.subTitle,
99        includeFontPadding: false,
100    },
101    tagBg: {
102        backgroundColor: 'rgba(255, 255, 255, 0.2)',
103    },
104    tagText: {
105        color: 'white',
106    },
107});
108