u

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

@@ -1,11 +1,61 @@
 import React from "react";
-import { View, Text } from "react-native";
-import { MainRoutes } from "@/configs/pages";
+import { View, BackHandler } from "react-native";
+import { Slot, useRouter, usePathname } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useMemo } from "react";
+import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
+import Navbar from "@/components/layout/navbar";
+
+export default function AppLayout({ 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() {
+    BackHandler.exitApp();
+  }
 
-export default function AppLayout() {
   return (
-    <View className="flex-1">
-      <Text className="text-base text-black">Hello RN</Text>
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <Slot />
+      </View>
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <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 }}>
+        <View style={{ paddingBottom: insets.bottom }}>
+          <Tabbar
+            tabs={tabs}
+            value={activeTabItem?.id}
+            onChange={(id) => {
+              router.push(id as any);
+            }}
+          />
+        </View>
+      </View>
     </View>
   );
 }