xref: /MusicFree/src/pages/home/components/navBar.tsx (revision e0caf3427c927f4cf2efda9969f9a6f4fb0ef565) 
1import {ROUTE_PATH} from '@/entry/router';
2import {useNavigation} from '@react-navigation/native';
3import React from 'react';
4import {Pressable, StyleSheet, View} from 'react-native';
5import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
6import rpx from '@/utils/rpx';
7import useColors from '@/hooks/useColors';
8import ThemeText from '@/components/base/themeText';
9import Color from 'color';
10import IconButton from '@/components/base/iconButton';
11
12// todo icon: = musicFree(引入自定义字体 居中) search
13export default function NavBar() {
14    const navigation = useNavigation<any>();
15    const colors = useColors();
16    return (
17        <View style={styles.appbar}>
18            <IconButton
19                name="menu"
20                style={styles.menu}
21                color={colors.text}
22                onPress={() => {
23                    navigation?.openDrawer();
24                }}
25            />
26
27            <Pressable
28                style={[
29                    styles.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.text).alpha(0.6).toString()}
44                />
45                <ThemeText
46                    accessible={false}
47                    fontSize="subTitle"
48                    style={[styles.text]}>
49                    点击这里开始搜索
50                </ThemeText>
51            </Pressable>
52        </View>
53    );
54}
55
56const styles = StyleSheet.create({
57    appbar: {
58        backgroundColor: 'transparent',
59        shadowColor: 'transparent',
60        flexDirection: 'row',
61        alignItems: 'center',
62        width: '100%',
63        height: rpx(88),
64    },
65    searchBar: {
66        marginHorizontal: rpx(24),
67        flexDirection: 'row',
68        alignItems: 'center',
69        flex: 1,
70        height: '72%',
71        maxHeight: rpx(64),
72        borderRadius: rpx(36),
73        paddingHorizontal: rpx(20),
74    },
75    text: {
76        marginLeft: rpx(12),
77        opacity: 0.6,
78    },
79    menu: {
80        marginLeft: rpx(24),
81    },
82});
83