template_0205

RN_TEMPLATE/app/navigators/MainNavigator.tsx

@@ -0,0 +1,350 @@
+import { useEffect, useRef, useState } from "react"
+import {
+  Animated,
+  Dimensions,
+  Platform,
+  Pressable,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native"
+import { BottomTabBarProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs"
+import { useNavigation } from "@react-navigation/native"
+import { NativeStackNavigationProp } from "@react-navigation/native-stack"
+import {
+  PanGestureHandler,
+  PanGestureHandlerStateChangeEvent,
+  State,
+} from "react-native-gesture-handler"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+
+import { Avatar } from "@/components/Avatar"
+import { Icon, IconTypes } from "@/components/Icon"
+import { Text } from "@/components/Text"
+import { useAuth } from "@/context/AuthContext"
+import { translate } from "@/i18n/translate"
+import { CommunityScreen } from "@/screens/CommunityScreen"
+import { ShowroomScreen } from "@/screens/ShowroomScreen/ShowroomScreen"
+import { useAppTheme } from "@/theme/context"
+import type { ThemedStyle } from "@/theme/types"
+import { s, fs } from "@/utils/responsive"
+
+import type { AppStackParamList, MainTabParamList } from "./navigationTypes"
+
+const Tab = createBottomTabNavigator<MainTabParamList>()
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window")
+
+// Tab configuration
+const TAB_CONFIG: { name: keyof MainTabParamList; icon: IconTypes }[] = [
+  { name: "Showroom", icon: "home" },
+  { name: "Community", icon: "barChart" },
+]
+
+/**
+ * Header left component with profile avatar button
+ */
+function HeaderProfileButton() {
+  const { user } = useAuth()
+  const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>()
+
+  const handlePress = () => {
+    navigation.navigate("Profile")
+  }
+
+  return (
+    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+      <Avatar
+        uri={user?.profile?.avatar}
+        fallback={user?.profile?.nickname || user?.username || "U"}
+        size={s(36)}
+      />
+    </TouchableOpacity>
+  )
+}
+
+/**
+ * Custom floating capsule tab bar with glass effect and gesture support
+ */
+function FloatingTabBar({ state, navigation }: BottomTabBarProps) {
+  const insets = useSafeAreaInsets()
+  const { themed, theme } = useAppTheme()
+
+  const tabIndex = state.index
+  const tabCount = TAB_CONFIG.length
+  const containerWidth = SCREEN_WIDTH - theme.spacing.xl * 2
+  const buttonWidth = (containerWidth - theme.spacing.xs * 2) / tabCount
+
+  // 动画值
+  const basePos = useRef(new Animated.Value(tabIndex)).current
+  const gestureX = useRef(new Animated.Value(0)).current
+
+  // 视觉上的活跃索引，用于控制图标颜色
+  const [visualIndex, setVisualIndex] = useState(tabIndex)
+
+  // 同步系统索引到视觉索引
+  useEffect(() => {
+    setVisualIndex(tabIndex)
+    Animated.spring(basePos, {
+      toValue: tabIndex,
+      useNativeDriver: true,
+      tension: 100,
+      friction: 12,
+    }).start()
+  }, [tabIndex, basePos])
+
+  // 监听手势位移，实时更新图标视觉状态
+  useEffect(() => {
+    const listenerId = gestureX.addListener(({ value }) => {
+      // 计算当前指示器中心位置对应的索引
+      const currentIndicatorPos = tabIndex * buttonWidth + value
+      const newVisualIndex = Math.max(
+        0,
+        Math.min(TAB_CONFIG.length - 1, Math.round(currentIndicatorPos / buttonWidth)),
+      )
+
+      if (newVisualIndex !== visualIndex) {
+        setVisualIndex(newVisualIndex)
+      }
+    })
+    return () => gestureX.removeListener(listenerId)
+  }, [tabIndex, visualIndex, buttonWidth, gestureX])
+
+  // 手势结束处理
+  const onHandlerStateChange = (event: PanGestureHandlerStateChangeEvent) => {
+    if (event.nativeEvent.state === State.END) {
+      const { translationX, velocityX } = event.nativeEvent
+      const movedTabs = Math.round(translationX / buttonWidth)
+
+      // 快速滑动检测
+      let finalMovedTabs = movedTabs
+      if (Math.abs(velocityX) > 500 && Math.abs(translationX) > 20) {
+        finalMovedTabs = velocityX > 0 ? -1 : 1 // 注意方向：向右滑是上一个，向左滑是下一个
+      }
+
+      // 计算新索引
+      let newIndex = tabIndex + finalMovedTabs
+      newIndex = Math.max(0, Math.min(TAB_CONFIG.length - 1, newIndex))
+
+      if (newIndex !== tabIndex) {
+        gestureX.flattenOffset()
+        requestAnimationFrame(() => {
+          navigation.navigate(TAB_CONFIG[newIndex].name)
+        })
+      }
+
+      // 弹簧动画复位
+      Animated.spring(gestureX, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 100,
+        friction: 15,
+      }).start()
+    }
+  }
+
+  // 指示器位置 = 基准位置 + 手势偏移
+  const indicatorTranslateX = Animated.add(
+    basePos.interpolate({
+      inputRange: TAB_CONFIG.map((_, i) => i),
+      outputRange: TAB_CONFIG.map((_, i) => theme.spacing.xs + i * buttonWidth),
+    }),
+    gestureX,
+  )
+
+  return (
+    <View style={$tabBarOverlay}>
+      <View style={[themed($tabBarContainer), { bottom: insets.bottom + theme.spacing.sm }]}>
+        <PanGestureHandler
+          onGestureEvent={Animated.event([{ nativeEvent: { translationX: gestureX } }], {
+            useNativeDriver: true,
+          })}
+          onHandlerStateChange={onHandlerStateChange}
+          activeOffsetX={[-15, 15]}
+        >
+          <Animated.View style={themed($tabBarGlass)}>
+            {/* 滑动指示器 */}
+            <Animated.View
+              style={[
+                themed($tabIndicator),
+                {
+                  width: buttonWidth,
+                  transform: [{ translateX: indicatorTranslateX }],
+                },
+              ]}
+            />
+
+            {/* Tab 按钮 */}
+            {TAB_CONFIG.map((tab, index) => {
+              // 图标颜色取决于 visualIndex (手势实时计算) 而不是 state.index
+              const isActive = visualIndex === index
+
+              return (
+                <Pressable
+                  key={tab.name}
+                  style={$tabButton}
+                  onPress={() => {
+                    if (tabIndex !== index) {
+                      navigation.navigate(tab.name)
+                    }
+                  }}
+                >
+                  <Icon
+                    icon={tab.icon}
+                    size={s(24)}
+                    color={isActive ? theme.colors.tint : theme.colors.textDim}
+                    strokeWidth={1.5}
+                  />
+                </Pressable>
+              )
+            })}
+          </Animated.View>
+        </PanGestureHandler>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Custom header component with absolutely centered title
+ */
+function CustomHeader({ title }: { title: string }) {
+  const { themed } = useAppTheme()
+  const insets = useSafeAreaInsets()
+
+  return (
+    <View
+      style={[themed($headerContainer), { paddingTop: insets.top, height: s(56) + insets.top }]}
+    >
+      {/* Absolutely centered title */}
+      <View style={[$headerTitleWrapper, { top: insets.top, height: s(56) }]}>
+        <Text style={themed($headerTitle)}>{title}</Text>
+      </View>
+      {/* Left side - avatar */}
+      <View style={$headerLeft}>
+        <HeaderProfileButton />
+      </View>
+      {/* Right side - future icons go here */}
+      <View style={$headerRight} />
+    </View>
+  )
+}
+
+/**
+ * This is the main navigator with a floating capsule tab bar.
+ */
+export function MainNavigator() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        header: ({ options }) => <CustomHeader title={options.title || ""} />,
+        tabBarHideOnKeyboard: true,
+        tabBarStyle: { display: "none" },
+      }}
+      tabBar={(props) => <FloatingTabBar {...props} />}
+    >
+      <Tab.Screen
+        name="Showroom"
+        component={ShowroomScreen}
+        options={{
+          title: translate("navigator:componentsTab"),
+        }}
+      />
+      <Tab.Screen
+        name="Community"
+        component={CommunityScreen}
+        options={{
+          title: translate("navigator:communityTab"),
+        }}
+      />
+    </Tab.Navigator>
+  )
+}
+
+// Styles
+const $headerContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
+  backgroundColor: colors.background,
+  height: s(56),
+  flexDirection: "row",
+  alignItems: "center",
+  paddingHorizontal: spacing.lg,
+})
+
+const $headerTitleWrapper: ViewStyle = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+}
+
+const $headerTitle: ThemedStyle<TextStyle> = ({ colors, typography }) => ({
+  color: colors.text,
+  fontFamily: typography.primary.medium,
+  fontSize: fs(17),
+})
+
+const $headerLeft: ViewStyle = {
+  zIndex: 1,
+}
+
+const $headerRight: ViewStyle = {
+  marginLeft: "auto",
+  zIndex: 1,
+}
+
+const $tabBarOverlay: ViewStyle = {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  alignItems: "center",
+}
+
+const $tabBarContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  width: SCREEN_WIDTH - spacing.xl * 2,
+  alignItems: "center",
+})
+
+const $tabBarGlass: ThemedStyle<ViewStyle> = ({ colors, spacing, isDark }) => ({
+  flexDirection: "row",
+  // 半透明背景模拟毛玻璃效果
+  backgroundColor: isDark ? "rgba(30, 30, 30, 0.8)" : "rgba(255, 255, 255, 0.8)",
+  borderRadius: s(28),
+  height: s(56),
+  width: "100%",
+  alignItems: "center",
+  paddingHorizontal: spacing.xs,
+  // iOS 阴影
+  ...(Platform.OS === "ios" && {
+    shadowColor: colors.palette.neutral800,
+    shadowOffset: { width: 0, height: s(4) },
+    shadowOpacity: 0.15,
+    shadowRadius: s(12),
+  }),
+  // Android 阴影
+  elevation: 8,
+  // 边框增加玻璃感
+  borderWidth: 1,
+  borderColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)",
+})
+
+const $tabIndicator: ThemedStyle<ViewStyle> = ({ isDark }) => ({
+  position: "absolute",
+  height: s(48),
+  // 选择器半透明
+  backgroundColor: isDark ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.08)",
+  borderRadius: s(24),
+  top: s(4),
+  left: 0,
+})
+
+const $tabButton: ViewStyle = {
+  flex: 1,
+  height: "100%",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1,
+}