1import React, {useState} from 'react'; 2import {StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {useNavigation, useRoute} from '@react-navigation/native'; 5import MusicBar from '@/components/musicBar'; 6import SearchResult from './searchResult'; 7import StatusBar from '@/components/base/statusBar'; 8import {Appbar, Searchbar} from 'react-native-paper'; 9import useColors from '@/hooks/useColors'; 10import {SafeAreaView} from 'react-native-safe-area-context'; 11import {fontSizeConst} from '@/constants/uiConst'; 12 13interface ISearchMusicListProps {} 14 15function filterMusic(query: string, musicList: IMusic.IMusicItem[]) { 16 if (query?.length === 0) { 17 return []; 18 } 19 return musicList.filter(_ => 20 `${_.title} ${_.artist} ${_.album} ${_.platform}`.includes(query.trim()), 21 ); 22} 23 24export default function SearchMusicList(props: ISearchMusicListProps) { 25 const route = useRoute<any>(); 26 const navigation = useNavigation(); 27 const musicList: IMusic.IMusicItem[] = route.params?.musicList ?? []; 28 const [result, setResult] = useState<IMusic.IMusicItem[]>([]); 29 const [query, setQuery] = useState(''); 30 31 console.log(musicList); 32 33 const colors = useColors(); 34 35 const onChangeSearch = (_: string) => { 36 _ = _.trim(); 37 setQuery(_); 38 setResult(filterMusic(_, musicList)); 39 }; 40 41 return ( 42 <SafeAreaView style={style.wrapper}> 43 <StatusBar></StatusBar> 44 <Appbar.Header style={[style.appbar, {backgroundColor: colors.primary}]}> 45 <Appbar.BackAction 46 onPress={() => { 47 navigation.goBack(); 48 }} 49 /> 50 <Searchbar 51 style={style.searchBar} 52 inputStyle={style.input} 53 placeholder="在列表中搜索歌曲" 54 value={query} 55 onChangeText={onChangeSearch}></Searchbar> 56 </Appbar.Header> 57 <SearchResult result={result}></SearchResult> 58 <MusicBar></MusicBar> 59 </SafeAreaView> 60 ); 61} 62 63const style = StyleSheet.create({ 64 wrapper: { 65 width: rpx(750), 66 flex: 1, 67 }, 68 appbar: { 69 shadowColor: 'transparent', 70 backgroundColor: '#2b333eaa', 71 }, 72 searchBar: { 73 minWidth: rpx(375), 74 flex: 1, 75 borderRadius: rpx(64), 76 height: rpx(64), 77 color: '#666666', 78 }, 79 input: { 80 padding: 0, 81 color: '#666666', 82 height: rpx(64), 83 fontSize: fontSizeConst.subTitle, 84 textAlignVertical: 'center', 85 includeFontPadding: false, 86 }, 87}); 88