u

2026-04-13 17:29:18 +08:00
1 parent 61e29b5f76
commit 157c84b0b4
@@ -0,0 +1,150 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, Pressable, StyleSheet } from "react-native";
+import { cn } from "@/utils/cn";
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
+import { Shadow } from "react-native-shadow-2";
+import { ChevronLeft, SlidersHorizontal, CirclePower } from "lucide-react-native";
+
+interface NavbarProps {
+  title?: string;
+
+  showBack?: boolean;
+  onBack?: () => void;
+
+  className?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const AnimatedView = Animated.View;
+
+export default function Navbar({ title, showBack = true, onBack, className, style }: NavbarProps) {
+  // 返回按钮
+  const scale = useSharedValue(1);
+  const backAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  // 右侧按钮动画
+  const leftScale = useSharedValue(1);
+  const rightScale = useSharedValue(1);
+
+  const leftStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: leftScale.value }],
+    opacity: leftScale.value === 1 ? 1 : 0.7,
+  }));
+
+  const rightStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: rightScale.value }],
+    opacity: rightScale.value === 1 ? 1 : 0.7,
+  }));
+
+  return (
+    // <View
+    //   pointerEvents="box-none"
+    //   className={cn("absolute top-0 left-0 right-0", className)}
+    //   style={[style]}
+    // >
+    <View
+      className={cn("flex-row gap-3 items-center justify-between mx-3", className)}
+      style={[
+        {
+          ...style,
+          height: 48
+        },
+      ]}
+    >
+      {showBack && (
+        <Pressable
+          onPress={onBack}
+          onPressIn={() => {
+            scale.value = withSpring(0.8);
+          }}
+          onPressOut={() => {
+            scale.value = withSpring(1);
+          }}
+        >
+          <AnimatedView style={backAnimatedStyle}>
+            <Shadow
+              distance={20}
+              startColor="rgba(0,0,0,0.035)"
+              endColor="rgba(255,255,255,0)"
+              offset={[0, 0]}
+              paintInside={false}
+              safeRender
+              style={styles.iconButtonShadow}
+            >
+              <ChevronLeft size={24} />
+            </Shadow>
+          </AnimatedView>
+        </Pressable>
+      )}
+
+      {title && (
+        <View className="flex-1">
+          <Text className="text-xl font-semibold tracking-tight text-black/90">{title}</Text>
+        </View>
+      )}
+
+      <Shadow
+        distance={20}
+        startColor="rgba(0,0,0,0.035)"
+        endColor="rgba(255,255,255,0)"
+        offset={[0, 0]}
+        paintInside={false}
+        safeRender
+        style={styles.groupShadow}
+      >
+        <Pressable
+          onPressIn={() => {
+            leftScale.value = withSpring(0.8);
+          }}
+          onPressOut={() => {
+            leftScale.value = withSpring(1);
+          }}
+        >
+          <AnimatedView style={leftStyle} className="w-14 items-center justify-center">
+            <SlidersHorizontal size={20} />
+          </AnimatedView>
+        </Pressable>
+
+        <View className="w-[1px] h-4 bg-black/10" />
+
+        {/* 右按钮 */}
+        <Pressable
+          onPressIn={() => {
+            rightScale.value = withSpring(0.8);
+          }}
+          onPressOut={() => {
+            rightScale.value = withSpring(1);
+          }}
+        >
+          <AnimatedView style={rightStyle} className="w-14 items-center justify-center">
+            <CirclePower size={20} />
+          </AnimatedView>
+        </Pressable>
+      </Shadow>
+    </View>
+    // </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  iconButtonShadow: {
+    borderRadius: 999,
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 0.5,
+    borderColor: "rgba(255,255,255,0.6)",
+  },
+  groupShadow: {
+    borderRadius: 999,
+    height: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 0.5,
+    borderColor: "rgba(255,255,255,0.6)",
+  },
+});