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