1import React, {useEffect} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import NavBar from './components/navBar'; 5import {useAtom, useSetAtom} from 'jotai'; 6import { 7 initSearchResults, 8 PageStatus, 9 pageStatusAtom, 10 queryAtom, 11 searchResultsAtom, 12} from './store/atoms'; 13import HistoryPanel from './components/historyPanel'; 14import ResultPanel from './components/resultPanel'; 15import MusicBar from '@/components/musicBar'; 16import Loading from '@/components/base/loading'; 17import {SafeAreaView} from 'react-native-safe-area-context'; 18import StatusBar from '@/components/base/statusBar'; 19 20export default function () { 21 const [pageStatus, setPageStatus] = useAtom(pageStatusAtom); 22 const setQuery = useSetAtom(queryAtom); 23 const setSearchResultsState = useSetAtom(searchResultsAtom); 24 useEffect(() => { 25 setSearchResultsState(initSearchResults); 26 return () => { 27 setPageStatus(PageStatus.EDITING); 28 setQuery(''); 29 }; 30 }, []); 31 32 return ( 33 <SafeAreaView style={style.wrapper}> 34 <StatusBar /> 35 <NavBar /> 36 <View style={{flex: 1}}> 37 {pageStatus === PageStatus.EDITING && <HistoryPanel />} 38 {pageStatus === PageStatus.SEARCHING && <Loading />} 39 {pageStatus === PageStatus.RESULT && <ResultPanel />} 40 </View> 41 <MusicBar /> 42 </SafeAreaView> 43 ); 44} 45 46const style = StyleSheet.create({ 47 wrapper: { 48 width: rpx(750), 49 flex: 1, 50 }, 51}); 52