1import React, {} from 'react'; 2import { 3 Keyboard, 4 StyleSheet, 5} from 'react-native'; 6import rpx from '@/utils/rpx'; 7import {useNavigation, useTheme} from '@react-navigation/native'; 8import {useAtom, useSetAtom} from 'jotai'; 9import {pageStatusAtom, PageStatus, queryAtom} from '../store/atoms'; 10import useSearch from '../hooks/useSearch'; 11import {Appbar, Button, Searchbar} from 'react-native-paper'; 12import { addHistory } from '../common/historySearch'; 13import { fontSizeConst } from '@/constants/uiConst'; 14import useTextColor from '@/hooks/useTextColor'; 15 16interface INavBarProps {} 17export default function NavBar(props: INavBarProps) { 18 const navigation = useNavigation(); 19 const search = useSearch(); 20 const [query, setQuery] = useAtom(queryAtom); 21 const setPageStatus = useSetAtom(pageStatusAtom); 22 const textColor = useTextColor(); 23 const {colors} = useTheme(); 24 25 const onSearchSubmit = async () => { 26 if (query === '') { 27 return; 28 } 29 setPageStatus(prev => 30 prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev, 31 ); 32 await search(query, 'all'); 33 await addHistory(query); 34 }; 35 36 return ( 37 <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}> 38 <Appbar.BackAction 39 onPress={() => { 40 // !!这个组件有bug，输入法拉起的时候返回会默认打开panel 41 Keyboard.dismiss(); 42 navigation.goBack(); 43 }}></Appbar.BackAction> 44 <Searchbar 45 autoFocus 46 inputStyle={style.input} 47 style={style.searchBar} 48 onFocus={() => { 49 setPageStatus(PageStatus.EDITING); 50 }} 51 placeholder="输入要搜索的歌曲" 52 onSubmitEditing={onSearchSubmit} 53 onChangeText={_ => setQuery(_)} 54 value={query}></Searchbar> 55 <Button color={textColor} onPress={onSearchSubmit}> 56 搜索 57 </Button> 58 </Appbar> 59 ); 60} 61 62const style = StyleSheet.create({ 63 appbar: { 64 shadowColor: 'transparent', 65 }, 66 searchBar: { 67 minWidth: rpx(375), 68 flex: 1, 69 borderRadius: rpx(64), 70 height: rpx(64), 71 color: '#666666' 72 }, 73 input: { 74 padding: 0, 75 color: '#666666', 76 height: rpx(64), 77 fontSize: fontSizeConst.small, 78 textAlignVertical: 'center', 79 includeFontPadding: false, 80 } 81}); 82