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/themeText'; 15 16// todo icon: = musicFree(引入自定义字体 居中) search 17export default function NavBar() { 18 const navigation = useNavigation<any>(); 19 const colors = useColors(); 20 return ( 21 <Appbar style={style.appbar}> 22 <Appbar.Action 23 icon="menu" 24 color={colors.text} 25 size={iconSizeConst.normal} 26 onPress={() => { 27 navigation?.openDrawer(); 28 }} 29 /> 30 <Pressable 31 style={[ 32 style.searchBar, 33 { 34 backgroundColor: color(colors.placeholder) 35 .negate() 36 .mix(color('#999999')) 37 .alpha(0.7) 38 .toString(), 39 }, 40 ]} 41 onPress={() => { 42 navigation.navigate(ROUTE_PATH.SEARCH_PAGE); 43 }}> 44 <Icon 45 name="magnify" 46 size={rpx(28)} 47 color={colors.placeholder} 48 style={style.searchIcon}></Icon> 49 <ThemeText fontSize='subTitle' style={[style.text, {color: colors.placeholder}]}> 50 点击这里开始搜索 51 </ThemeText> 52 </Pressable> 53 </Appbar> 54 ); 55} 56 57const style = StyleSheet.create({ 58 appbar: { 59 backgroundColor: 'transparent', 60 shadowColor: 'transparent', 61 flexDirection: 'row', 62 width: rpx(750), 63 }, 64 searchBar: { 65 marginHorizontal: rpx(24), 66 flexDirection: 'row', 67 alignItems: 'center', 68 flex: 1, 69 height: rpx(72), 70 borderRadius: rpx(36), 71 paddingHorizontal: rpx(28), 72 }, 73 searchIcon: {}, 74 text: { 75 marginLeft: rpx(12) 76 }, 77}); 78