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} 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 23 const onSearchSubmit = async () => { 24 if (query === '') { 25 return; 26 } 27 setPageStatus(prev => 28 prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev, 29 ); 30 await search(query, 'all'); 31 await addHistory(query); 32 }; 33 34 return ( 35 <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}> 36 <Appbar.BackAction 37 onPress={() => { 38 // !!这个组件有bug，输入法拉起的时候返回会默认打开panel 39 Keyboard.dismiss(); 40 navigation.goBack(); 41 }}></Appbar.BackAction> 42 <Searchbar 43 autoFocus 44 inputStyle={style.input} 45 style={style.searchBar} 46 onFocus={() => { 47 setPageStatus(PageStatus.EDITING); 48 }} 49 placeholder="输入要搜索的歌曲" 50 onSubmitEditing={onSearchSubmit} 51 onChangeText={_ => setQuery(_)} 52 value={query}></Searchbar> 53 <Button color={textColor} onPress={onSearchSubmit}> 54 搜索 55 </Button> 56 </Appbar> 57 ); 58} 59 60const style = StyleSheet.create({ 61 appbar: { 62 shadowColor: 'transparent', 63 }, 64 searchBar: { 65 minWidth: rpx(375), 66 flex: 1, 67 borderRadius: rpx(64), 68 height: rpx(64), 69 color: '#666666', 70 }, 71 input: { 72 padding: 0, 73 color: '#666666', 74 height: rpx(64), 75 fontSize: fontSizeConst.subTitle, 76 textAlignVertical: 'center', 77 includeFontPadding: false, 78 }, 79}); 80