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