Files
physical-expo/app/(tabs)/_layout.tsx
2026-01-13 09:46:05 +08:00

80 lines
2.1 KiB
TypeScript

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 { 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
screenOptions={{
tabBarActiveTintColor: Colors[theme].tint,
tabBarInactiveTintColor: Colors[theme].tabIconDefault,
headerShown: false,
tabBarButton: HapticTab,
tabBarBackground: TabBarBackground,
tabBarStyle: Platform.select({
ios: {
position: "absolute",
},
default: {},
}),
}}
>
<Tabs.Screen
name="index"
options={{
title: t("tabs.all"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="list" color={color} />
),
}}
/>
<Tabs.Screen
name="live"
options={{
title: t("tabs.live"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="play-circle" color={color} />
),
}}
/>
<Tabs.Screen
name="upcoming"
options={{
title: t("tabs.upcoming"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="calendar" color={color} />
),
}}
/>
<Tabs.Screen
name="finished"
options={{
title: t("tabs.finished"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="checkmark-circle" color={color} />
),
}}
/>
<Tabs.Screen
name="favorite"
options={{
title: t("tabs.fav"),
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="star" color={color} />
),
}}
/>
</Tabs>
);
}