64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import { Platform } from 'react-native';
|
|
import { SymbolView } from 'expo-symbols';
|
|
|
|
const ACTIVE = '#4a9eff';
|
|
const INACTIVE = '#555';
|
|
const BG = '#111111';
|
|
|
|
// SymbolView tintColor is typed as string but Tabs passes ColorValue — cast to avoid TS error
|
|
function TabIcon({ name, color }: { name: string; color: any }) {
|
|
return <SymbolView name={name as any} tintColor={color} size={22} />;
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarStyle: { backgroundColor: BG, borderTopColor: '#222' },
|
|
tabBarActiveTintColor: ACTIVE,
|
|
tabBarInactiveTintColor: INACTIVE,
|
|
tabBarLabelStyle: { fontSize: 10 },
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="control"
|
|
options={{
|
|
title: '控制台',
|
|
tabBarIcon: ({ color }) => (
|
|
<TabIcon name={Platform.select({ ios: 'slider.horizontal.3', android: 'tune', web: 'tune' })!} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="waveform"
|
|
options={{
|
|
title: '波形',
|
|
tabBarIcon: ({ color }) => (
|
|
<TabIcon name={Platform.select({ ios: 'waveform', android: 'show_chart', web: 'show_chart' })!} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="map"
|
|
options={{
|
|
title: '地图',
|
|
tabBarIcon: ({ color }) => (
|
|
<TabIcon name={Platform.select({ ios: 'map', android: 'map', web: 'map' })!} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="records"
|
|
options={{
|
|
title: '记录',
|
|
tabBarIcon: ({ color }) => (
|
|
<TabIcon name={Platform.select({ ios: 'list.bullet', android: 'list', web: 'list' })!} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|