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'; 19import NoPlugin from './components/noPlugin'; 20 21export default function () { 22 const [pageStatus, setPageStatus] = useAtom(pageStatusAtom); 23 const setQuery = useSetAtom(queryAtom); 24 const setSearchResultsState = useSetAtom(searchResultsAtom); 25 useEffect(() => { 26 setSearchResultsState(initSearchResults); 27 return () => { 28 setPageStatus(PageStatus.EDITING); 29 setQuery(''); 30 }; 31 }, []); 32 33 return ( 34 <SafeAreaView style={style.wrapper}> 35 <StatusBar /> 36 <NavBar /> 37 <View style={{flex: 1}}> 38 {pageStatus === PageStatus.EDITING && <HistoryPanel />} 39 {pageStatus === PageStatus.SEARCHING && <Loading />} 40 {pageStatus === PageStatus.RESULT && <ResultPanel />} 41 {pageStatus === PageStatus.NO_PLUGIN && <NoPlugin />} 42 </View> 43 <MusicBar /> 44 </SafeAreaView> 45 ); 46} 47 48const style = StyleSheet.create({ 49 wrapper: { 50 width: rpx(750), 51 flex: 1, 52 }, 53}); 54