bowong
/
expo-duooomi-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 搜索框

This commit is contained in:
郭文文 2026-01-21 13:26:51 +08:00
parent 9fbb9e785a
commit ce9d57a8a0
1 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/(tabs)/index.tsx
View File

@ -442,7 +442,7 @@ const Index = observer(function Index() {
return ( return (
<Block className="flex-1 bg-black px-[12px]"> <Block className="flex-1 bg-black px-[12px]">
<BannerSection /> <BannerSection />
<HeroCircle onOpenSearch={() => setIsSearchOpen(true)} onQuickGen={handleQuickGen} selectedItem={selectedItem} /> <HeroCircle isSearchOpen={isSearchOpen} onOpenSearch={() => setIsSearchOpen(true)} onQuickGen={handleQuickGen} selectedItem={selectedItem} />
<FilterSection <FilterSection
activeTab={activeTab} activeTab={activeTab}
onChange={(tab) => { onChange={(tab) => {
@ -522,7 +522,7 @@ const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen,
if (!isOpen) return null if (!isOpen) return null
return ( return (
<Block className="absolute inset-x-0 top-0 z-50 mt-[24px] flex-row items-center gap-[8px] px-[20px]"> <Block className="absolute inset-x-0 top-0 z-50 flex-row items-center gap-[8px] px-[20px]" style={{ marginTop: 16, marginBottom: 26 }}>
<Block <Block
className="flex-1 flex-row items-center border-[3px] border-black bg-white px-[12px] shadow-[4px_4px_0px_#000]" className="flex-1 flex-row items-center border-[3px] border-black bg-white px-[12px] shadow-[4px_4px_0px_#000]"
style={{ height: 48, transform: [{ skewX: '-6deg' }] }} style={{ height: 48, transform: [{ skewX: '-6deg' }] }}
@ -575,13 +575,6 @@ const GooActions = observer<GooActionsProps>(function GooActions({ gooPoints, on
{isDev && isPolling && <Block className="ml-[4px] size-[6px] rounded-full bg-green-500" />} {isDev && isPolling && <Block className="ml-[4px] size-[6px] rounded-full bg-green-500" />}
</Block> </Block>
)} )}
{/* <Block
className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
onClick={onOpenSearch}
>
<Ionicons color="black" name="search" size={22} />
</Block> */}
</Block> </Block>
</Block> </Block>
) )
@ -623,7 +616,7 @@ const DuooomiLogo = memo(function DuooomiLogo() {
const width = 200 const width = 200
const height = 40 const height = 40
const textHeight = paragraph.getHeight() const textHeight = paragraph.getHeight()
const y = (height - textHeight) / 2 const y = (height - textHeight) / 1.5
return ( return (
<Canvas style={{ width, height }}> <Canvas style={{ width, height }}>
@ -636,8 +629,9 @@ type HeroCircleProps = {
selectedItem: MediaItem | null selectedItem: MediaItem | null
onQuickGen: () => void onQuickGen: () => void
onOpenSearch: () => void onOpenSearch: () => void
isSearchOpen: boolean
} }
const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem, onQuickGen, onOpenSearch }) { const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem, onQuickGen, onOpenSearch, isSearchOpen }) {
const isAuthenticated = userStore.isAuthenticated const isAuthenticated = userStore.isAuthenticated
const { balance } = userBalanceStore const { balance } = userBalanceStore
@ -648,8 +642,8 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
return ( return (
<Block className="relative z-10 items-center"> <Block className="relative z-10 items-center">
<Block className='flex-row justify-between items-center w-full mx-[16px] mb-[18px]'> <Block className='flex-row justify-between items-center w-full mx-[16px] mb-[18px]' style={{ opacity: isSearchOpen ? 0 : 1, pointerEvents: isSearchOpen ? 'none' : 'auto' }}>
<Block > <Block>
<DuooomiLogo /> <DuooomiLogo />
</Block> </Block>
<Block className="flex-shrink-0"> <Block className="flex-shrink-0">
@ -698,12 +692,21 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
</Block> </Block>
</Block> </Block>
</Block> </Block>
<Block {!isSearchOpen && (
className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]" <Block className='gap-[10px]'>
onClick={onOpenSearch} <Block
> className="size-[46px] items-center justify-center rounded-full border-[2px] border-black bg-white shadow-[4px_4px_0px_#000]"
<Ionicons color="black" name="search" size={22} /> onClick={onOpenSearch}
</Block> >
<Ionicons color="black" name="search" size={22} />
</Block>
<Block
className="size-[46px] items-center justify-center rounded-full border-[2px] border-black bg-white shadow-[4px_4px_0px_#000]"
>
<Ionicons color="black" name="settings" size={22} />
</Block>
</Block>
)}
</Block> </Block>
</Block> </Block>
) )