71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import { Platform, View } from 'react-native';
|
|
import { SymbolView } from 'expo-symbols';
|
|
import { Text } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { GlobalStatusBar } from '../../src/components/device/GlobalStatusBar';
|
|
import { useTheme } from '../../src/design/tokens';
|
|
|
|
function TabIcon({ ios, emoji, color }: { ios: string; emoji: string; color: string | any }) {
|
|
if (Platform.OS === 'ios') {
|
|
return <SymbolView name={ios as any} tintColor={color} size={22} />;
|
|
}
|
|
return <Text style={{ fontSize: 18, color, lineHeight: 24 }}>{emoji}</Text>;
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
const insets = useSafeAreaInsets();
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: theme.bg.base, paddingTop: insets.top }}>
|
|
<GlobalStatusBar />
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarStyle: { backgroundColor: theme.bg.void, borderTopColor: theme.bg.border },
|
|
tabBarActiveTintColor: theme.blue.fg,
|
|
tabBarInactiveTintColor: theme.text.muted,
|
|
tabBarLabelStyle: { fontSize: 10 },
|
|
}}
|
|
>
|
|
{/* Hidden screens */}
|
|
<Tabs.Screen name="index" options={{ href: null }} />
|
|
<Tabs.Screen name="control" options={{ href: null }} />
|
|
<Tabs.Screen name="waveform" options={{ href: null }} />
|
|
<Tabs.Screen name="map" options={{ href: null }} />
|
|
|
|
{/* Visible tabs */}
|
|
<Tabs.Screen
|
|
name="wave"
|
|
options={{
|
|
title: '波形',
|
|
tabBarIcon: ({ color }) => <TabIcon ios="waveform" emoji="〜" color={color} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="records"
|
|
options={{
|
|
title: '测点',
|
|
tabBarIcon: ({ color }) => <TabIcon ios="list.bullet" emoji="≡" color={color} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: '剖面',
|
|
tabBarIcon: ({ color }) => <TabIcon ios="chart.line.uptrend.xyaxis" emoji="↗" color={color} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="projects"
|
|
options={{
|
|
title: '工程',
|
|
tabBarIcon: ({ color }) => <TabIcon ios="folder" emoji="▤" color={color} />,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
</View>
|
|
);
|
|
}
|