1import React from 'react'; 2import {Keyboard, StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {useNavigation, useTheme} from '@react-navigation/native'; 5import {useAtom, useSetAtom} from 'jotai'; 6import {pageStatusAtom, PageStatus, queryAtom, searchResultsAtom, initSearchResults} from '../store/atoms'; 7import useSearch from '../hooks/useSearch'; 8import {Appbar, Button, Searchbar} from 'react-native-paper'; 9import {addHistory} from '../common/historySearch'; 10import {fontSizeConst} from '@/constants/uiConst'; 11import useTextColor from '@/hooks/useTextColor'; 12import useColors from '@/hooks/useColors'; 13 14interface INavBarProps {} 15export default function NavBar(props: INavBarProps) { 16 const navigation = useNavigation(); 17 const search = useSearch(); 18 const [query, setQuery] = useAtom(queryAtom); 19 const setPageStatus = useSetAtom(pageStatusAtom); 20 const textColor = useTextColor(); 21 const colors = useColors(); 22 const setSearchResultsState = useSetAtom(searchResultsAtom); 23 24 const onSearchSubmit = async () => { 25 if (query === '') { 26 return; 27 } 28 setSearchResultsState(initSearchResults); 29 setPageStatus(prev => 30 prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev, 31 ); 32 await search(query, 1); 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.subTitle, 78 textAlignVertical: 'center', 79 includeFontPadding: false, 80 }, 81}); 82