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