u

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { MainRoutes } from "@/configs/pages";
+
+export default function AppLayout() {
+  return (
+    <View className="flex-1">
+      <Text className="text-base text-black">Hello RN</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,43 @@
+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";
+
+interface ModuleLayoutProps {
+  tabs: TabbarItem[];
+}
+
+export default function ModuleLayout({ tabs }: ModuleLayoutProps) {
+  const insets = useSafeAreaInsets();
+
+  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,
+        }}
+      >
+        <Slot />
+      </View>
+
+      <View
+        className="absolute left-0 right-0 bottom-0 z-10"
+        style={{ paddingBottom: insets.bottom }}
+      >
+        <Tabbar tabs={tabs} />
+      </View>
+    </View>
+  );
+}