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