u

code/app/app-rn4/src/layouts/ModuleLayout.tsx

@@ -1,42 +1,62 @@
-import React from "react";
 import { View } from "react-native";
 import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
 import Navbar from "@/components/layout/navbar";
-import { Slot } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Slot, useRouter, usePathname } from "expo-router";
+import { useMemo } from "react";
 
-interface ModuleLayoutProps {
-  tabs: TabbarItem[];
-}
-
-export default function ModuleLayout({ tabs }: ModuleLayoutProps) {
+export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
+  const router = useRouter();
   const insets = useSafeAreaInsets();
+  const pathname = usePathname();
+
+  const activeTabItem = useMemo(() => {
+    return tabs.find((t) => t.id === pathname);
+  }, [pathname]);
+
+  function handleClose() {
+    router.replace("/(tabs)/home");
+  }
 
   return (
-    <View className="flex-1">
-      <View
-        pointerEvents="box-none"
-        className="absolute top-0 left-0 right-0 z-10 bg-white"
-        style={{ paddingTop: insets.top }}
-      >
-        <Navbar />
-      </View>
-
-      <View
-        className="flex-1 z-[1]"  
-        style={{
-          paddingTop: insets.top + 48 + 4,
-          paddingBottom: insets.bottom + 12 + 16 + 56,
-        }}
-      >
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
         <Slot />
       </View>
 
       <View
-        className="absolute left-0 right-0 bottom-0 z-10"
-        style={{ paddingBottom: insets.bottom }}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+        }}
       >
-        <Tabbar tabs={tabs} />
+        <View
+          style={{
+            paddingTop: insets.top,
+          }}
+        >
+          <Navbar
+            title={activeTabItem?.title}
+            titleIcon={activeTabItem?.icon}
+            showBack={false}
+            onClose={handleClose}
+          />
+        </View>
+      </View>
+
+      <View style={{ position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 10 }}>
+        <View style={{ paddingBottom: insets.bottom }}>
+          <Tabbar
+            tabs={tabs}
+            value={activeTabItem?.id}
+            onChange={(id) => {
+              router.push(id as any);
+            }}
+          />
+        </View>
       </View>
     </View>
   );