自定义底部导航栏

app/(tabs)/_layout.tsx

@@ -1,32 +1,18 @@
 import { Tabs } from "expo-router";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Platform } from "react-native";
 
-import { HapticTab } from "@/components/haptic-tab";
+import CustomTabBar from "@/components/custom-tab-bar";
 import { IconSymbol } from "@/components/ui/icon-symbol";
-import TabBarBackground from "@/components/ui/tab-bar-background";
-import { Colors } from "@/constants/theme";
-import { useTheme } from "@/context/ThemeContext";
 
 export default function TabLayout() {
-  const { theme } = useTheme();
   const { t } = useTranslation();
 
   return (
     <Tabs
+      tabBar={(props) => <CustomTabBar {...props} />}
       screenOptions={{
-        tabBarActiveTintColor: Colors[theme].tint,
-        tabBarInactiveTintColor: Colors[theme].tabIconDefault,
         headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            position: "absolute",
-          },
-          default: {},
-        }),
       }}
     >
       <Tabs.Screen