b49cc0f3bd
- Adjusted tab bar dimensions and margins in TabsLayout for better visual consistency. - Streamlined ImageGallery by removing loading states and optimizing image transition handling. - Updated ChatScreen to utilize SafeAreaView for improved layout on different devices. - Enhanced GroupInfoScreen and PrivateChatInfoScreen with a consistent page header layout, including back navigation. - Refactored ChatHeader to simplify structure and improve maintainability.
103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { Platform, useWindowDimensions } from 'react-native';
|
|
import { Tabs } from 'expo-router';
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
import { colors, shadows } from '../../../src/theme';
|
|
import { BREAKPOINTS } from '../../../src/hooks/useResponsive';
|
|
import { useTotalUnreadCount } from '../../../src/stores';
|
|
|
|
const TAB_BAR_HEIGHT = 56;
|
|
const TAB_BAR_FLOATING_MARGIN = 12;
|
|
const TAB_BAR_MARGIN = 24;
|
|
|
|
export default function TabsLayout() {
|
|
const { width } = useWindowDimensions();
|
|
const insets = useSafeAreaInsets();
|
|
const unreadCount = useTotalUnreadCount();
|
|
const hideTabBar = Platform.OS === 'web' && width >= BREAKPOINTS.desktop;
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: colors.primary.main,
|
|
tabBarInactiveTintColor: colors.text.secondary,
|
|
tabBarStyle: hideTabBar
|
|
? { display: 'none', height: 0, overflow: 'hidden' }
|
|
: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
marginHorizontal: TAB_BAR_MARGIN,
|
|
bottom: TAB_BAR_FLOATING_MARGIN + insets.bottom,
|
|
height: TAB_BAR_HEIGHT,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.background.paper,
|
|
...shadows.lg,
|
|
borderTopWidth: 0,
|
|
elevation: 100,
|
|
zIndex: 100,
|
|
},
|
|
tabBarItemStyle: {
|
|
borderRadius: 16,
|
|
marginHorizontal: 2,
|
|
paddingVertical: 1,
|
|
},
|
|
tabBarShowLabel: true,
|
|
tabBarLabelStyle: { fontSize: 11, fontWeight: '600', marginTop: -1 },
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="home"
|
|
options={{
|
|
title: '首页',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<MaterialCommunityIcons
|
|
name={focused ? 'home' : 'home-outline'}
|
|
size={focused ? 24 : 22}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="messages"
|
|
options={{
|
|
title: '消息',
|
|
tabBarBadge: unreadCount > 0 ? (unreadCount > 99 ? 99 : unreadCount) : undefined,
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<MaterialCommunityIcons
|
|
name={focused ? 'message-text' : 'message-text-outline'}
|
|
size={focused ? 24 : 22}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="schedule"
|
|
options={{
|
|
title: '课表',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<MaterialCommunityIcons name="calendar-today" size={focused ? 24 : 22} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: '我的',
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<MaterialCommunityIcons
|
|
name={focused ? 'account' : 'account-outline'}
|
|
size={focused ? 24 : 22}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|