u

code/app/app-rn4/src/components/layout/navbar.tsx

@@ -3,21 +3,34 @@ import { View, Text, StyleProp, ViewStyle, Pressable, StyleSheet } from "react-n
 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";
+import { ChevronLeft, SlidersHorizontal, CirclePower, LucideIcon } from "lucide-react-native";
 
 interface NavbarProps {
   title?: string;
+  titleIcon?: LucideIcon;
 
   showBack?: boolean;
   onBack?: () => void;
 
+  onClose?: () => void;
+
   className?: string;
   style?: StyleProp<ViewStyle>;
 }
 
 const AnimatedView = Animated.View;
 
-export default function Navbar({ title, showBack = true, onBack, className, style }: NavbarProps) {
+export default function Navbar({
+  title,
+  titleIcon,
+  showBack = true,
+  onBack,
+  onClose,
+  className,
+  style,
+}: NavbarProps) {
+  const TitleIcon = titleIcon;
+
   // 返回按钮
   const scale = useSharedValue(1);
   const backAnimatedStyle = useAnimatedStyle(() => ({
@@ -39,56 +52,77 @@ export default function Navbar({ title, showBack = true, onBack, className, styl
   }));
 
   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>
-      )}
+      <View className="flex-1 flex-row gap-3">
+        {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.04)"
+                endColor="rgba(0,0,0,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>
-      )}
+        {title && (
+          <Shadow
+            distance={20}
+            startColor="rgba(0,0,0,0.04)"
+            endColor="rgba(0,0,0,0)"
+            offset={[0, 0]}
+            paintInside={false}
+            safeRender
+            style={{
+              ...styles.titleShadown,
+              alignContent: "center",
+              justifyContent: "center",
+              maxWidth: 180,
+              gap: 4,
+            }}
+          >
+            {TitleIcon && <TitleIcon size={18} color="#000" />}
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={{
+                fontSize: 18,
+                fontWeight: "600",
+                color: "#111",
+              }}
+            >
+              {title}
+            </Text>
+          </Shadow>
+        )}
+      </View>
 
       <Shadow
         distance={20}
-        startColor="rgba(0,0,0,0.035)"
-        endColor="rgba(255,255,255,0)"
+        startColor="rgba(0,0,0,0.04)"
+        endColor="rgba(0,0,0,0)"
         offset={[0, 0]}
         paintInside={false}
         safeRender
@@ -109,8 +143,8 @@ export default function Navbar({ title, showBack = true, onBack, className, styl
 
         <View className="w-[1px] h-4 bg-black/10" />
 
-        {/* 右按钮 */}
         <Pressable
+          onPress={onClose}
           onPressIn={() => {
             rightScale.value = withSpring(0.8);
           }}
@@ -124,7 +158,6 @@ export default function Navbar({ title, showBack = true, onBack, className, styl
         </Pressable>
       </Shadow>
     </View>
-    // </View>
   );
 }
 
@@ -137,6 +170,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderWidth: 0.5,
     borderColor: "rgba(255,255,255,0.6)",
+    backgroundColor: "#fff",
   },
   groupShadow: {
     borderRadius: 999,
@@ -146,5 +180,21 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderWidth: 0.5,
     borderColor: "rgba(255,255,255,0.6)",
+    backgroundColor: "#fff",
+  },
+  titleShadown: {
+    borderRadius: 999,
+    height: 36,
+
+    flexDirection: "row",
+    alignItems: "center",
+
+    justifyContent: "flex-start",
+
+    borderWidth: 0.5,
+    borderColor: "rgba(255,255,255,0.6)",
+    paddingHorizontal: 16,
+
+    backgroundColor: "#fff",
   },
 });