xref: /MusicFree/src/pages/musicDetail/components/navBar.tsx (revision e650bfb34226e2a09d15cbf7832c4805a87cd60e)
14060c00aS猫头猫import React from 'react';
24060c00aS猫头猫import {StyleSheet, Text, View} from 'react-native';
3bf6e62f2S猫头猫import rpx from '@/utils/rpx';
4242960d3S猫头猫import MusicQueue from '@/core/musicQueue';
5bf6e62f2S猫头猫import {useNavigation} from '@react-navigation/native';
619dc08ecS猫头猫import Tag from '@/components/base/tag';
7bf6e62f2S猫头猫import {fontSizeConst, fontWeightConst} from '@/constants/uiConst';
83b3d6357S猫头猫import Share from 'react-native-share';
93b3d6357S猫头猫import {B64Asset} from '@/constants/assetsConst';
10*e650bfb3S猫头猫import IconButton from '@/components/base/iconButton';
11bf6e62f2S猫头猫
124060c00aS猫头猫export default function NavBar() {
13bf6e62f2S猫头猫    const navigation = useNavigation();
14bf6e62f2S猫头猫    const musicItem = MusicQueue.useCurrentMusicItem();
15b882a19dS猫头猫    // const {showShare} = useShare();
16bf6e62f2S猫头猫
17bf6e62f2S猫头猫    return (
18*e650bfb3S猫头猫        <View style={styles.container}>
19bf6e62f2S猫头猫            <IconButton
20*e650bfb3S猫头猫                name="arrow-left"
21*e650bfb3S猫头猫                sizeType={'normal'}
22bf6e62f2S猫头猫                color="white"
23*e650bfb3S猫头猫                style={styles.button}
24bf6e62f2S猫头猫                onPress={() => {
25bf6e62f2S猫头猫                    navigation.goBack();
264060c00aS猫头猫                }}
274060c00aS猫头猫            />
28*e650bfb3S猫头猫            <View style={styles.headerContent}>
29*e650bfb3S猫头猫                <Text numberOfLines={1} style={styles.headerTitleText}>
302c595535S猫头猫                    {musicItem?.title ?? '无音乐'}
31bf6e62f2S猫头猫                </Text>
32*e650bfb3S猫头猫                <View style={styles.headerDesc}>
33*e650bfb3S猫头猫                    <Text style={styles.headerArtistText} numberOfLines={1}>
344060c00aS猫头猫                        {musicItem?.artist}
354060c00aS猫头猫                    </Text>
362c595535S猫头猫                    {musicItem?.platform ? (
372c595535S猫头猫                        <Tag tagName={musicItem.platform} />
382c595535S猫头猫                    ) : null}
39bf6e62f2S猫头猫                </View>
40bf6e62f2S猫头猫            </View>
41d1f226e6S猫头猫            <IconButton
42*e650bfb3S猫头猫                name="share"
43d1f226e6S猫头猫                color="white"
44*e650bfb3S猫头猫                sizeType={'normal'}
45*e650bfb3S猫头猫                style={styles.button}
463b3d6357S猫头猫                onPress={async () => {
473b3d6357S猫头猫                    try {
483b3d6357S猫头猫                        await Share.open({
493b3d6357S猫头猫                            type: 'image/jpeg',
503b3d6357S猫头猫                            title: 'MusicFree-一个插件化的免费音乐播放器',
513b3d6357S猫头猫                            message: 'MusicFree-一个插件化的免费音乐播放器',
523b3d6357S猫头猫                            url: B64Asset.share,
533b3d6357S猫头猫                            subject: 'MusicFree分享',
543b3d6357S猫头猫                        });
553b3d6357S猫头猫                    } catch {}
564060c00aS猫头猫                }}
574060c00aS猫头猫            />
58bf6e62f2S猫头猫        </View>
59bf6e62f2S猫头猫    );
60bf6e62f2S猫头猫}
61bf6e62f2S猫头猫
62*e650bfb3S猫头猫const styles = StyleSheet.create({
63*e650bfb3S猫头猫    container: {
644245d81aS猫头猫        width: '100%',
65bf6e62f2S猫头猫        height: rpx(150),
66bf6e62f2S猫头猫        flexDirection: 'row',
67bf6e62f2S猫头猫        alignItems: 'center',
68bf6e62f2S猫头猫        justifyContent: 'space-between',
69bf6e62f2S猫头猫    },
70*e650bfb3S猫头猫    button: {
71*e650bfb3S猫头猫        marginHorizontal: rpx(24),
72*e650bfb3S猫头猫    },
73bf6e62f2S猫头猫    headerContent: {
74bf6e62f2S猫头猫        flex: 1,
75bf6e62f2S猫头猫        height: rpx(150),
76bf6e62f2S猫头猫        justifyContent: 'center',
77bf6e62f2S猫头猫        alignItems: 'center',
78bf6e62f2S猫头猫    },
79bf6e62f2S猫头猫    headerTitleText: {
80bf6e62f2S猫头猫        color: 'white',
81ec26b768S猫头猫        fontWeight: fontWeightConst.semibold,
82ec26b768S猫头猫        fontSize: fontSizeConst.title,
83bf6e62f2S猫头猫        marginBottom: rpx(12),
84bf6e62f2S猫头猫        includeFontPadding: false,
85bf6e62f2S猫头猫    },
86bf6e62f2S猫头猫    headerDesc: {
87bf6e62f2S猫头猫        height: rpx(32),
88bf6e62f2S猫头猫        flexDirection: 'row',
89bf6e62f2S猫头猫        alignItems: 'center',
904245d81aS猫头猫        paddingHorizontal: rpx(40),
91bf6e62f2S猫头猫    },
92bf6e62f2S猫头猫    headerArtistText: {
93bf6e62f2S猫头猫        color: 'white',
94ec26b768S猫头猫        fontSize: fontSizeConst.subTitle,
95bf6e62f2S猫头猫        includeFontPadding: false,
96bf6e62f2S猫头猫    },
97bf6e62f2S猫头猫});
98