u

2025-11-03 17:30:08 +08:00
1 parent 458f0cd6ac
commit 2347d55823
@@ -1,137 +0,0 @@
-import { usePathname } from 'expo-router'
-import { TabList, Tabs, TabSlot, TabTrigger } from 'expo-router/ui'
-import { icons } from 'lucide-react-native'
-import { useEffect, useState } from 'react'
-import { Pressable, View } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated'
-
-export interface TabbarItem {
-  icon: keyof typeof icons
-  iconSize?: number
-  activeIcon?: keyof typeof icons
-  name: string
-  href?: string
-  onPress?: () => void
-}
-
-interface AppTabbarProps {
-  data: TabbarItem[]
-  onTabPress?: (item: TabbarItem) => void
-}
-
-function TabButton({
-  icon,
-  activeIcon,
-  iconSize = 24,
-  isFocused = false,
-  onPress,
-}: {
-  icon: keyof typeof icons
-  activeIcon?: keyof typeof icons
-  iconSize?: number
-  isFocused?: boolean
-  onPress?: () => void
-}) {
-  const activeColor = '#333'
-  const inactiveColor = '#aaa'
-
-  const scale = useSharedValue(1)
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scale.value }],
-  }))
-
-  const IconComponent = icons[isFocused && activeIcon ? activeIcon : icon]
-
-  const handlePress = () => {
-    scale.value = withSequence(
-      withTiming(0.9, { duration: 200 }),
-      withTiming(1, { duration: 200 }),
-    )
-    onPress?.()
-  }
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      className="flex-1 items-center justify-center h-full"
-    >
-      <Animated.View style={animatedStyle}>
-        <IconComponent
-          width={iconSize}
-          height={iconSize}
-          stroke={isFocused ? activeColor : inactiveColor}
-        />
-      </Animated.View>
-    </Pressable>
-  )
-}
-
-export default function AppTabbar({ data, onTabPress }: AppTabbarProps) {
-  const pathname = usePathname()
-
-  // 初始选中 Tab
-  const defaultTab = data.find(item => item.href === pathname)?.name
-    ?? data.find(item => item.href)?.name
-    ?? data[0]?.name
-  const [activeTab, setActiveTab] = useState<string>(defaultTab)
-
-  // 当 pathname 改变（路由跳转）时，同步高亮
-  useEffect(() => {
-    const matchTab = data.find(item => item.href === pathname)
-    if (matchTab) {
-      setActiveTab(matchTab.name)
-    }
-    // 如果没有匹配的路由，保持当前的 activeTab 不变
-    // 这样无 href 的项就能保持选中状态
-  }, [pathname, data])
-
-  const handleTabPress = (item: TabbarItem) => {
-    setActiveTab(item.name)
-    item.onPress?.()
-    onTabPress?.(item)
-  }
-
-  return (
-    <Tabs>
-      <TabSlot />
-
-      <TabList asChild>
-        <View className="flex-row bg-white h-12 items-center">
-          {data.map((item) => {
-            const isFocused = activeTab === item.name
-
-            if (item.href) {
-              return (
-                <TabTrigger key={item.name} name={item.name} href={item.href} asChild>
-                  <TabButton
-                    icon={item.icon}
-                    activeIcon={item.activeIcon}
-                    iconSize={item.iconSize}
-                    isFocused={isFocused}
-                    onPress={() => handleTabPress(item)}
-                  />
-                </TabTrigger>
-              )
-            }
-
-            return (
-              <TabButton
-                key={item.name}
-                icon={item.icon}
-                activeIcon={item.activeIcon}
-                iconSize={item.iconSize}
-                onPress={() => handleTabPress(item)}
-                isFocused={isFocused}
-              />
-            )
-          })}
-        </View>
-      </TabList>
-    </Tabs>
-  )
-}
@@ -0,0 +1,198 @@
+import { usePathname, useRouter } from 'expo-router'
+import { TabList, Tabs, TabSlot, TabTrigger } from 'expo-router/ui'
+import { icons } from 'lucide-react-native'
+import { useEffect, useState } from 'react'
+import { Pressable, View } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import Animated, { SlideInLeft, SlideInRight, SlideOutLeft, SlideOutRight, useAnimatedStyle, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
+import { scheduleOnRN } from 'react-native-worklets'
+
+interface AppTabbarProps {
+  data: TabbarItem[]
+}
+
+export interface TabbarItem {
+  icon: keyof typeof icons
+  iconSize?: number
+  activeIcon?: keyof typeof icons
+  name: string
+  href?: string
+  onPress?: () => void
+}
+
+function TabButton({
+  icon,
+  activeIcon,
+  iconSize = 24,
+  isFocused = false,
+  onPress,
+}: {
+  icon: keyof typeof icons
+  activeIcon?: keyof typeof icons
+  iconSize?: number
+  isFocused?: boolean
+  onPress?: () => void
+}) {
+  const scale = useSharedValue(1)
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }))
+
+  useEffect(() => {
+    if (isFocused) {
+      scale.value = withSequence(
+        withTiming(0.9, { duration: 120 }),
+        withTiming(1, { duration: 160 }),
+      )
+    }
+  }, [isFocused])
+
+  const IconComponent = icons[isFocused && activeIcon ? activeIcon : icon]
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={{ flex: 1, alignItems: 'center', justifyContent: 'center', height: '100%' }}
+    >
+      <Animated.View style={animatedStyle}>
+        <IconComponent width={iconSize} height={iconSize} stroke={isFocused ? '#333' : '#aaa'} />
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+export default function CustomTabbar({ data }: AppTabbarProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const [activeTab, setActiveTab] = useState<string>(() => {
+    const match = data.find(item => item.href === pathname)
+    return match?.name ?? data[0]?.name
+  })
+
+  // 反转方向
+  const [swipeDirection, setSwipeDirection] = useState<'left' | 'right'>('left')
+  function updateSwipeDirection(tabName: string) {
+    const currentIndex = data.findIndex(d => d.name === activeTab)
+    const targetIndex = data.findIndex(d => d.name === tabName)
+
+    if (currentIndex === -1 || targetIndex === -1 || currentIndex === targetIndex)
+      return
+
+    setSwipeDirection(targetIndex > currentIndex ? 'left' : 'right')
+    setActiveTab(tabName)
+  }
+
+  // 点击调用
+  const handlPressTab = (item: TabbarItem) => {
+    updateSwipeDirection(item.name)
+
+    setActiveTab(item.name)
+    if (typeof item.onPress === 'function')
+      item.onPress()
+  }
+
+  // 定义 JS 线程安全函数
+  const handlePanTab = (tabName: string) => {
+    const tab = data.find(item => item.name === tabName)
+    if (!tab)
+      return
+
+    updateSwipeDirection(tabName)
+
+    setActiveTab(tab.name)
+
+    if (typeof tab.onPress === 'function') {
+      tab.onPress()
+    }
+
+    if (tab.href && tab.href !== pathname) {
+      router.push(tab.href)
+    }
+  }
+
+  // 手势滑动
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-20, 20])
+    .failOffsetY([-10, 10])
+    .onEnd((event) => {
+      const threshold = 60
+      const currentIndex = data.findIndex(item => item.name === activeTab)
+      let targetIndex: number | undefined
+
+      if (event.translationX < -threshold && currentIndex < data.length - 1) {
+        targetIndex = currentIndex + 1
+      }
+      else if (event.translationX > threshold && currentIndex > 0) {
+        targetIndex = currentIndex - 1
+      }
+
+      if (targetIndex !== undefined) {
+        const tabName = data[targetIndex].name
+        scheduleOnRN(handlePanTab, tabName)
+      }
+    })
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Tabs>
+        <GestureDetector gesture={panGesture}>
+          <View style={{ flex: 1 }}>
+            {(() => {
+              const currentTab = data.find(d => d.name === activeTab)
+
+              if (!currentTab)
+                return null
+
+              return currentTab.href
+                ? (
+                    <Animated.View
+                      key={activeTab}
+                      entering={swipeDirection === 'left' ? SlideInRight.duration(300) : SlideInLeft.duration(300)}
+                      style={{ flex: 1 }}
+                    >
+                      <TabSlot />
+                    </Animated.View>
+                  )
+                : (
+                    <TabSlot />
+                  )
+            })()}
+          </View>
+        </GestureDetector>
+
+        <TabList asChild>
+          <View style={{ flexDirection: 'row', backgroundColor: 'white', height: 48, alignItems: 'center' }}>
+            {data.map((item) => {
+              if (item.href) {
+                return (
+                  <TabTrigger key={item.name} name={item.name} href={item.href} asChild>
+                    <TabButton
+                      icon={item.icon}
+                      activeIcon={item.activeIcon}
+                      iconSize={item.iconSize}
+                      isFocused={activeTab === item.name}
+                      onPress={() => handlPressTab(item)}
+                    />
+                  </TabTrigger>
+                )
+              }
+
+              return (
+                <TabButton
+                  key={item.name}
+                  icon={item.icon}
+                  activeIcon={item.activeIcon}
+                  iconSize={item.iconSize}
+                  isFocused={activeTab === item.name}
+                  onPress={() => handlPressTab(item)}
+                />
+              )
+            })}
+          </View>
+        </TabList>
+      </Tabs>
+    </GestureHandlerRootView>
+  )
+}