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",
   },
 });

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

@@ -2,7 +2,6 @@ import { View, StyleProp, ViewStyle, Pressable, StyleSheet } from "react-native"
 import { LucideIcon } from "lucide-react-native";
 import { cn } from "@/utils/cn";
 import { Shadow } from "react-native-shadow-2";
-import { useState } from "react";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
 
 export interface TabbarItem {
@@ -22,14 +21,9 @@ export interface TabbarProps {
 }
 
 export default function Tabbar({ tabs, value, onChange, className, style }: TabbarProps) {
-  const [innerValue, setInnerValue] = useState(tabs[0]?.id);
-
-  const activeTab = value ?? innerValue;
+  const activeTab = value;
 
   const handlePress = (id: string) => {
-    if (value === undefined) {
-      setInnerValue(id);
-    }
     onChange?.(id);
   };
 
@@ -37,8 +31,8 @@ export default function Tabbar({ tabs, value, onChange, className, style }: Tabb
     <View className={cn("mx-3", className)} style={style}>
       <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)"
         style={styles.tabbarShadow}
       >
         <View className="w-full flex-row items-center justify-between">
@@ -86,15 +80,15 @@ function TabItem({
       onPressOut={() => {
         scale.value = withTiming(1, { duration: 120 });
       }}
-      className="flex-1 items-center justify-center"
+      className="flex-1 "
     >
-      <Animated.View style={scaleStyle}>
+      <Animated.View style={scaleStyle} className="items-center justify-center">
         <Icon size={24} color={isActive ? "#5FAF7B" : "#666"} />
         {tab.title && (
           <Animated.Text
             style={[
               {
-                fontSize: 11,
+                fontSize: 10,
                 marginTop: 4,
                 fontWeight: isActive ? "600" : "400",
                 color: isActive ? "#5FAF7B" : "#666",
@@ -131,13 +125,7 @@ function CenterButton({ tab, onPress }: { tab: TabbarItem; onPress?: () => void
         }}
       >
         <Animated.View style={animatedStyle}>
-          {/* <Shadow
-            distance={12}
-            startColor="rgba(140,140,140,0.03)"
-            endColor="rgba(255,255,255,0)"
-            style={styles.centerButtonShadown}
-          > */}
-          <View
+          {/* <View
             style={{
               width: 64,
               height: 64,
@@ -147,12 +135,19 @@ function CenterButton({ tab, onPress }: { tab: TabbarItem; onPress?: () => void
               justifyContent: "center",
               borderWidth: 8,
               borderColor: "white",
-              top: -12,
+              top: -4,
             }}
+          > */}
+          <Shadow
+            distance={6}
+            startColor="rgba(0,0,0,0.06)"
+            endColor="rgba(0,0,0,0)"
+            offset={[0, 2]}
+            style={[styles.centerButtonShadown]}
           >
             <Icon size={30} color="#fff" />
-          </View>
-          {/* </Shadow> */}
+          </Shadow>
+          {/* </View> */}
         </Animated.View>
       </Pressable>
     </View>
@@ -161,14 +156,14 @@ function CenterButton({ tab, onPress }: { tab: TabbarItem; onPress?: () => void
 
 const styles = StyleSheet.create({
   centerButtonShadown: {
-    width: 48,
-    height: 48,
+    width: 44,
+    height: 44,
     borderRadius: 999,
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
     borderColor: "rgba(0,0,0,0.03)",
-    backgroundColor: "#fff",
+    backgroundColor: "#22C55E",
   },
   tabbarShadow: {
     borderRadius: 999,