xref: /MusicFree/src/pages/home/components/navBar.tsx (revision b882a19d884fffa32f7c8cef31652b909dceaa0f) 
1import {ROUTE_PATH} from '@/entry/router';
2import {useNavigation} from '@react-navigation/native';
3import React from 'react';
4import {Pressable, StyleSheet} from 'react-native';
5import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
6import rpx from '@/utils/rpx';
7import {Appbar} from 'react-native-paper';
8import {iconSizeConst} from '@/constants/uiConst';
9import useColors from '@/hooks/useColors';
10import ThemeText from '@/components/base/themeText';
11import Color from 'color';
12
13// todo icon: = musicFree(引入自定义字体 居中) search
14export default function NavBar() {
15    const navigation = useNavigation<any>();
16    const colors = useColors();
17    return (
18        <Appbar style={style.appbar}>
19            <Appbar.Action
20                icon="menu"
21                color={colors.text}
22                size={iconSizeConst.normal}
23                onPress={() => {
24                    navigation?.openDrawer();
25                }}
26            />
27            <Pressable
28                style={[
29                    style.searchBar,
30                    {
31                        backgroundColor: Color(colors.primary)
32                            .alpha(0.7)
33                            .toString(),
34                    },
35                ]}
36                onPress={() => {
37                    navigation.navigate(ROUTE_PATH.SEARCH_PAGE);
38                }}>
39                <Icon
40                    name="magnify"
41                    size={rpx(28)}
42                    color={Color(colors.textSecondary).alpha(0.8).toString()}
43                    style={style.searchIcon}
44                />
45                <ThemeText
46                    fontSize="subTitle"
47                    style={[
48                        style.text,
49                        {
50                            color: Color(colors.textSecondary)
51                                .alpha(0.8)
52                                .toString(),
53                        },
54                    ]}>
55                    点击这里开始搜索
56                </ThemeText>
57            </Pressable>
58        </Appbar>
59    );
60}
61
62const style = StyleSheet.create({
63    appbar: {
64        backgroundColor: 'transparent',
65        shadowColor: 'transparent',
66        flexDirection: 'row',
67        width: rpx(750),
68    },
69    searchBar: {
70        marginHorizontal: rpx(24),
71        flexDirection: 'row',
72        alignItems: 'center',
73        flex: 1,
74        height: rpx(64),
75        borderRadius: rpx(36),
76        paddingHorizontal: rpx(28),
77    },
78    searchIcon: {},
79    text: {
80        marginLeft: rpx(12),
81    },
82});
83