css

app/(tabs)/generate.tsx

@@ -5,7 +5,6 @@ import { useFocusEffect, useRouter } from 'expo-router'
 import { observer } from 'mobx-react-lite'
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { ActivityIndicator, RefreshControl } from 'react-native'
-import { useAnimatedStyle } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { imgPicker } from '@/@share/apis/imgPicker'
@@ -511,21 +510,28 @@ type TemplateSectionHeaderProps = {
   onRandom: () => void
 }
 const TemplateSectionHeader = memo<TemplateSectionHeaderProps>(function TemplateSectionHeader({ onRandom }) {
-  const style = useAnimatedStyle(() => ({
-    transform: [{ skewX: '-6deg' }],
-    backgroundColor: '#FFE500',
-  }))
+  const skewOffset = 8
+  const padding = 2
+  const buttonWidth = 100
+  const buttonHeight = 32
 
   return (
     <Block className="my-[16px]">
       <Block className="flex-row items-center justify-between">
-        <Block
-          animated
-          className="flex-row items-center gap-[8px] border-2 border-black bg-accent px-[12px] py-[4px]"
-          style={style}
-        >
-          <FontAwesome color="black" name="film" size={16} />
-          <Text className="text-[10px] font-[900] text-black">视频模版</Text>
+        <Block className="relative" style={{ width: buttonWidth, height: buttonHeight }}>
+          <ParallelogramShape
+            width={buttonWidth}
+            height={buttonHeight}
+            fillColor="#FFE500"
+            padding={padding}
+            skewOffset={skewOffset}
+            strokeWidth={2}
+          >
+            <Block className="absolute inset-0 flex-row items-center gap-[8px] px-[16px]">
+              <FontAwesome color="black" name="film" size={16} />
+              <Text className="text-[10px] font-[900] text-black">视频模版</Text>
+            </Block>
+          </ParallelogramShape>
         </Block>
 
         <Block