1import {ROUTE_PATH} from '@/entry/router'; 2import {useNavigation} from '@react-navigation/native'; 3import React from 'react'; 4import { 5 Pressable, 6 StyleSheet, 7} from 'react-native'; 8import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 9import rpx from '@/utils/rpx'; 10import {Appbar} from 'react-native-paper'; 11import {iconSizeConst} from '@/constants/uiConst'; 12import color from 'color'; 13import useColors from '@/hooks/useColors'; 14import ThemeText from '@/components/base/themeText'; 15import Color from 'color'; 16 17// todo icon: = musicFree(引入自定义字体 居中) search 18export default function NavBar() { 19 const navigation = useNavigation<any>(); 20 const colors = useColors(); 21 return ( 22 <Appbar style={style.appbar}> 23 <Appbar.Action 24 icon="menu" 25 color={colors.text} 26 size={iconSizeConst.normal} 27 onPress={() => { 28 navigation?.openDrawer(); 29 }} 30 /> 31 <Pressable 32 style={[ 33 style.searchBar, 34 { 35 backgroundColor: Color(colors.primary).alpha(0.7).toString(), 36 }, 37 ]} 38 onPress={() => { 39 navigation.navigate(ROUTE_PATH.SEARCH_PAGE); 40 }}> 41 <Icon 42 name="magnify" 43 size={rpx(28)} 44 color={Color(colors.textSecondary).alpha(0.8).toString()} 45 style={style.searchIcon}></Icon> 46 <ThemeText fontSize='subTitle' style={[style.text, {color: Color(colors.textSecondary).alpha(0.8).toString()}]}> 47 点击这里开始搜索 48 </ThemeText> 49 </Pressable> 50 </Appbar> 51 ); 52} 53 54const style = StyleSheet.create({ 55 appbar: { 56 backgroundColor: 'transparent', 57 shadowColor: 'transparent', 58 flexDirection: 'row', 59 width: rpx(750), 60 }, 61 searchBar: { 62 marginHorizontal: rpx(24), 63 flexDirection: 'row', 64 alignItems: 'center', 65 flex: 1, 66 height: rpx(64), 67 borderRadius: rpx(36), 68 paddingHorizontal: rpx(28), 69 }, 70 searchIcon: {}, 71 text: { 72 marginLeft: rpx(12) 73 }, 74}); 75