145 lines
3.2 KiB
TypeScript
145 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { createStackNavigator } from '@react-navigation/stack';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
|
|
// 导入屏幕组件
|
|
import HomeScreen from '@/screens/HomeScreen';
|
|
import CallScreen from '@/screens/CallScreen';
|
|
import DocumentScreen from '@/screens/DocumentScreen';
|
|
import SettingsScreen from '@/screens/SettingsScreen';
|
|
|
|
// 导航类型定义
|
|
export type RootStackParamList = {
|
|
MainTabs: undefined;
|
|
};
|
|
|
|
export type TabParamList = {
|
|
Home: undefined;
|
|
Call: undefined;
|
|
Documents: undefined;
|
|
Settings: undefined;
|
|
};
|
|
|
|
const Tab = createBottomTabNavigator<TabParamList>();
|
|
const Stack = createStackNavigator<RootStackParamList>();
|
|
|
|
// 图标组件
|
|
const TabIcon: React.FC<{ name: string; focused: boolean }> = ({ name, focused }) => {
|
|
const getIcon = (iconName: string) => {
|
|
switch (iconName) {
|
|
case 'home':
|
|
return '🏠';
|
|
case 'call':
|
|
return '📞';
|
|
case 'documents':
|
|
return '📄';
|
|
case 'settings':
|
|
return '👤';
|
|
default:
|
|
return '❓';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.tabIcon}>
|
|
<Text style={[styles.tabIconText, { opacity: focused ? 1 : 0.6 }]}>
|
|
{getIcon(name)}
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// 底部标签导航器
|
|
const TabNavigator: React.FC = () => {
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
tabBarIcon: ({ focused }) => (
|
|
<TabIcon name={route.name.toLowerCase()} focused={focused} />
|
|
),
|
|
tabBarActiveTintColor: '#2196F3',
|
|
tabBarInactiveTintColor: '#666',
|
|
tabBarStyle: styles.tabBar,
|
|
tabBarLabelStyle: styles.tabBarLabel,
|
|
headerShown: false,
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name="Home"
|
|
component={HomeScreen}
|
|
options={{
|
|
tabBarLabel: '首页',
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Call"
|
|
component={CallScreen}
|
|
options={{
|
|
tabBarLabel: '通话',
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Documents"
|
|
component={DocumentScreen}
|
|
options={{
|
|
tabBarLabel: '文档',
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Settings"
|
|
component={SettingsScreen}
|
|
options={{
|
|
tabBarLabel: '我的',
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
};
|
|
|
|
// 主导航器
|
|
const AppNavigator: React.FC = () => {
|
|
return (
|
|
<NavigationContainer>
|
|
<Stack.Navigator
|
|
initialRouteName="MainTabs"
|
|
screenOptions={{
|
|
headerShown: false,
|
|
}}
|
|
>
|
|
<Stack.Screen
|
|
name="MainTabs"
|
|
component={TabNavigator}
|
|
/>
|
|
</Stack.Navigator>
|
|
</NavigationContainer>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBar: {
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
paddingTop: 8,
|
|
paddingBottom: 8,
|
|
height: 60,
|
|
},
|
|
tabBarLabel: {
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
marginTop: 4,
|
|
},
|
|
tabIcon: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 24,
|
|
height: 24,
|
|
},
|
|
tabIconText: {
|
|
fontSize: 20,
|
|
},
|
|
});
|
|
|
|
export default AppNavigator;
|