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-22 10:17:26 +08:00
parent 92578a7dce
commit 3af07fcde0
1 changed files with 85 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -522,12 +522,45 @@ const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen,
}, [onClose, onSearch])
if (!isOpen) return null
const searchHeight = 48
const closeSize = 48
const skewOffset = 8
const padding = 2
const searchWidth = screenWidth - 40 - 8 - closeSize
return (
<Block className="absolute inset-x-0 top-0 z-50 flex-row items-center gap-[8px] px-[20px]" style={{ marginTop: 16, marginBottom: 26 }}>
<Block
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' }] }}
>
{/* 搜索输入平行四边形 */}
<Block className="relative flex-1" style={{ height: searchHeight }}>
<Canvas style={{ position: 'absolute', inset: 0 }}>
{/* 白色平行四边形主体 */}
<Path
path={Skia.Path.Make()
.moveTo(skewOffset + padding, padding)
.lineTo(searchWidth - padding, padding)
.lineTo(searchWidth - skewOffset - padding, searchHeight - padding)
.lineTo(padding, searchHeight - padding)
.close()}
color={Skia.Color('#FFFFFF')}
/>
{/* 黑色描边 */}
<Path
path={Skia.Path.Make()
.moveTo(skewOffset + padding, padding)
.lineTo(searchWidth - padding, padding)
.lineTo(searchWidth - skewOffset - padding, searchHeight - padding)
.lineTo(padding, searchHeight - padding)
.close()}
color={Skia.Color('#323232')}
style="stroke"
strokeWidth={3}
/>
{/* 右侧 + 底部硬阴影 */}
<ParallelogramShadow height={searchHeight} padding={padding} skewOffset={skewOffset} width={searchWidth} />
</Canvas>
<Block className="absolute inset-0 flex-row items-center px-[18px]">
<Ionicons color="black" name="search" size={20} style={{ marginRight: 8 }} />
<TextInput
autoFocus
@ -543,12 +576,40 @@ const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen,
value={searchText}
/>
</Block>
<Block
className="items-center justify-center border-[3px] border-black bg-accent shadow-[4px_4px_0px_#000]"
onClick={handleClose}
style={{ width: 48, height: 48, transform: [{ skewX: '-6deg' }] }}
>
<Ionicons color="black" name="close" size={24} style={{ transform: [{ skewX: '6deg' }] }} />
</Block>
{/* 关闭按钮平行四边形 */}
<Block className="relative" style={{ width: closeSize, height: closeSize }} onClick={handleClose}>
<Canvas style={{ position: 'absolute', inset: 0 }}>
{/* 黄色平行四边形主体 */}
<Path
path={Skia.Path.Make()
.moveTo(skewOffset + padding, padding)
.lineTo(closeSize - padding, padding)
.lineTo(closeSize - skewOffset - padding, closeSize - padding)
.lineTo(padding, closeSize - padding)
.close()}
color={Skia.Color('#FFE500')}
/>
{/* 黑色描边 */}
<Path
path={Skia.Path.Make()
.moveTo(skewOffset + padding, padding)
.lineTo(closeSize - padding, padding)
.lineTo(closeSize - skewOffset - padding, closeSize - padding)
.lineTo(padding, closeSize - padding)
.close()}
color={Skia.Color('#323232')}
style="stroke"
strokeWidth={3}
/>
{/* 右侧 + 底部硬阴影 */}
<ParallelogramShadow height={closeSize} padding={padding} skewOffset={skewOffset} width={closeSize} />
</Canvas>
<Block className="absolute inset-0 items-center justify-center">
<Ionicons color="black" name="close" size={24} />
</Block>
</Block>
</Block>
)