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/base/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 && ( 42 <NoPlugin notSupportType="搜索" /> 43 )} 44 </View> 45 </SafeAreaView> 46 <MusicBar /> 47 </SafeAreaView> 48 ); 49} 50 51const style = StyleSheet.create({ 52 wrapper: { 53 width: '100%', 54 flex: 1, 55 }, 56 flex1: { 57 flex: 1, 58 }, 59}); 60