20260507213409

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

@@ -0,0 +1,74 @@
+import { View } from "react-native";
+import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
+import Navbar from "@/components/layout/navbar";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Slot, useRouter, usePathname } from "expo-router";
+import { useMemo, useRef } from "react";
+
+export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const pathname = usePathname();
+
+  const lastValidTabRef = useRef<TabbarItem | undefined>(undefined);
+
+  const activeTabItem = useMemo(() => {
+    const found = tabs.find((t) => t.id === pathname);
+
+    if (found?.isCenter) {
+      return lastValidTabRef.current;
+    }
+
+    if (found) {
+      lastValidTabRef.current = found;
+      return found;
+    }
+
+    return lastValidTabRef.current;
+  }, [pathname, tabs]);
+
+  function handleClose() {
+    router.replace("/(tabs)/home");
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, zIndex: 0 }}>
+        <Slot />
+      </View>
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+        }}
+      >
+        <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>
+  );
+}