xref: /MusicFree/src/pages/home/components/navBar.tsx (revision ed067386d74ad02ad6f817b5bcbae7b589b9e81f) 
1import {ROUTE_PATH} from '@/core/router';
2import {useNavigation} from '@react-navigation/native';
3import React from 'react';
4import {Pressable, StyleSheet, View} from 'react-native';
5import rpx from '@/utils/rpx';
6import useColors from '@/hooks/useColors';
7import ThemeText from '@/components/base/themeText';
8import Color from 'color';
9import IconButton from '@/components/base/iconButton';
10import Icon from '@/components/base/icon.tsx';
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                accessibilityLabel="打开侧边栏"
20                name="bars-3"
21                style={styles.menu}
22                color={colors.text}
23                onPress={() => {
24                    navigation?.openDrawer();
25                }}
26            />
27
28            <Pressable
29                style={[
30                    styles.searchBar,
31                    {
32                        backgroundColor: colors.placeholder,
33                    },
34                ]}
35                accessible
36                accessibilityLabel="点击这里开始搜索"
37                onPress={() => {
38                    navigation.navigate(ROUTE_PATH.SEARCH_PAGE);
39                }}>
40                <Icon
41                    accessible={false}
42                    name="magnifying-glass"
43                    size={rpx(32)}
44                    color={Color(colors.text).alpha(0.6).toString()}
45                />
46                <ThemeText
47                    accessible={false}
48                    fontSize="subTitle"
49                    style={[styles.text]}>
50                    点击这里开始搜索
51                </ThemeText>
52            </Pressable>
53        </View>
54    );
55}
56
57const styles = StyleSheet.create({
58    appbar: {
59        backgroundColor: 'transparent',
60        shadowColor: 'transparent',
61        flexDirection: 'row',
62        alignItems: 'center',
63        width: '100%',
64        height: rpx(88),
65    },
66    searchBar: {
67        marginHorizontal: rpx(24),
68        flexDirection: 'row',
69        alignItems: 'center',
70        flex: 1,
71        height: '72%',
72        maxHeight: rpx(64),
73        borderRadius: rpx(36),
74        paddingHorizontal: rpx(20),
75    },
76    text: {
77        marginLeft: rpx(12),
78        opacity: 0.6,
79    },
80    menu: {
81        marginLeft: rpx(24),
82    },
83});
84