Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Tabs } from 'expo-router';
import { HapticTab } from '@/src/components/HapticTab';
import { IconSymbol } from '@/src/components/ui/IconSymbol';
import { Colors } from '@/src/constants/theme';
import { useThemeAwareColorScheme } from '@/src/hooks/useThemeAwareColorScheme';
export default function TabLayout() {
const colorScheme = useThemeAwareColorScheme();
const insets = useSafeAreaInsets();
return (
<Tabs
initialRouteName="collect"
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
tabBarButton: HapticTab,
headerShown: false,
tabBarStyle: {
backgroundColor: colorScheme === 'dark' ? '#1a1a1a' : '#ffffff',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
height: 65 + insets.bottom,
paddingBottom: insets.bottom,
paddingTop: 10,
borderTopWidth: 0,
},
}}
>
<Tabs.Screen
name="collect"
options={{
title: '收藏',
tabBarAccessibilityLabel: 'tab-collect',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="doc.text.fill" color={color} />,
}}
/>
<Tabs.Screen
name="forum"
options={{
title: '论坛',
tabBarAccessibilityLabel: 'tab-forum',
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="bubble.left.and.bubble.right.fill" color={color} />
),
}}
/>
<Tabs.Screen
name="scanner"
options={{
title: '',
tabBarAccessibilityLabel: 'tab-scanner',
tabBarIcon: ({ color: _color, focused: _focused }) => (
<View
testID="tab-scanner"
style={{
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: Colors[colorScheme ?? 'light'].scanButtonBackground,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 30,
borderWidth: 3,
borderColor: Colors[colorScheme ?? 'light'].scanButtonBorder,
}}
>
<IconSymbol
size={35}
name="viewfinder.circle.fill"
color={Colors[colorScheme ?? 'light'].scanButtonIcon}
/>
</View>
),
}}
/>
<Tabs.Screen
name="ranking"
options={{
title: '榜单',
tabBarAccessibilityLabel: 'tab-ranking',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="cart.fill" color={color} />,
}}
/>
<Tabs.Screen
name="profile"
options={{
title: '我的',
tabBarAccessibilityLabel: 'tab-profile',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
}}
/>
</Tabs>
);
}
|