1import React, {useEffect} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import NavBar from './components/navBar'; 4import {useAtom, useSetAtom} from 'jotai'; 5import { 6 initSearchResults, 7 PageStatus, 8 pageStatusAtom, 9 queryAtom, 10 searchResultsAtom, 11} from './store/atoms'; 12import HistoryPanel from './components/historyPanel'; 13import ResultPanel from './components/resultPanel'; 14import MusicBar from '@/components/musicBar'; 15import Loading from '@/components/base/loading'; 16import {SafeAreaView} from 'react-native-safe-area-context'; 17import StatusBar from '@/components/base/statusBar'; 18import NoPlugin from './components/noPlugin'; 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 edges={['bottom', 'top']} style={style.wrapper}> 34 <StatusBar /> 35 <NavBar /> 36 <SafeAreaView edges={['left', 'right']} style={style.wrapper}> 37 <View style={style.flex1}> 38 {pageStatus === PageStatus.EDITING && <HistoryPanel />} 39 {pageStatus === PageStatus.SEARCHING && <Loading />} 40 {pageStatus === PageStatus.RESULT && <ResultPanel />} 41 {pageStatus === PageStatus.NO_PLUGIN && <NoPlugin />} 42 </View> 43 </SafeAreaView> 44 <MusicBar /> 45 </SafeAreaView> 46 ); 47} 48 49const style = StyleSheet.create({ 50 wrapper: { 51 width: '100%', 52 flex: 1, 53 }, 54 flex1: { 55 flex: 1, 56 }, 57}); 58