xref: /MusicFree/src/pages/home/components/navBar.tsx (revision 9dc4d3f3f143e58d7ce3a2bb894227faa58b035c) 
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                accessible
37                accessibilityLabel="点击这里开始搜索"
38                onPress={() => {
39                    navigation.navigate(ROUTE_PATH.SEARCH_PAGE);
40                }}>
41                <Icon
42                    accessible={false}
43                    name="magnify"
44                    size={rpx(32)}
45                    color={Color(colors.textSecondary).alpha(0.8).toString()}
46                />
47                <ThemeText
48                    accessible={false}
49                    fontSize="subTitle"
50                    style={[
51                        style.text,
52                        {
53                            color: Color(colors.textSecondary)
54                                .alpha(0.8)
55                                .toString(),
56                        },
57                    ]}>
58                    点击这里开始搜索
59                </ThemeText>
60            </Pressable>
61        </Appbar>
62    );
63}
64
65const style = StyleSheet.create({
66    appbar: {
67        backgroundColor: 'transparent',
68        shadowColor: 'transparent',
69        flexDirection: 'row',
70        width: '100%',
71    },
72    searchBar: {
73        marginHorizontal: rpx(24),
74        flexDirection: 'row',
75        alignItems: 'center',
76        flex: 1,
77        height: '72%',
78        maxHeight: rpx(64),
79        borderRadius: rpx(36),
80        paddingHorizontal: rpx(20),
81    },
82    text: {
83        marginLeft: rpx(12),
84    },
85});
86