130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { useTheme } from 'react-native-paper';
|
|
|
|
// Импортируем существующие экраны
|
|
import { ConversationsScreen } from '../screens/ConversationsScreen';
|
|
import { ChatScreen } from '../screens/ChatScreen';
|
|
|
|
// Заглушки для новых экранов (создадим позже)
|
|
import { ContactsScreen } from '../screens/ContactsScreen';
|
|
import { ProfileScreen } from '../screens/ProfileScreen';
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
const ChatsStack = createNativeStackNavigator();
|
|
const ContactsStack = createNativeStackNavigator();
|
|
const ProfileStack = createNativeStackNavigator();
|
|
|
|
// Стек навигации для чатов
|
|
function ChatsStackNavigator() {
|
|
return (
|
|
<ChatsStack.Navigator>
|
|
<ChatsStack.Screen
|
|
name="ConversationsList"
|
|
component={ConversationsScreen}
|
|
options={{
|
|
title: 'Чаты',
|
|
headerLargeTitle: true,
|
|
}}
|
|
/>
|
|
<ChatsStack.Screen
|
|
name="Chat"
|
|
component={ChatScreen}
|
|
options={({ route }) => ({
|
|
title: route.params?.title || 'Чат',
|
|
})}
|
|
/>
|
|
</ChatsStack.Navigator>
|
|
);
|
|
}
|
|
|
|
// Стек навигации для контактов
|
|
function ContactsStackNavigator() {
|
|
return (
|
|
<ContactsStack.Navigator>
|
|
<ContactsStack.Screen
|
|
name="ContactsList"
|
|
component={ContactsScreen}
|
|
options={{
|
|
title: 'Контакты',
|
|
headerLargeTitle: true,
|
|
}}
|
|
/>
|
|
</ContactsStack.Navigator>
|
|
);
|
|
}
|
|
|
|
// Стек навигации для профиля
|
|
function ProfileStackNavigator() {
|
|
return (
|
|
<ProfileStack.Navigator>
|
|
<ProfileStack.Screen
|
|
name="ProfileMain"
|
|
component={ProfileScreen}
|
|
options={{
|
|
title: 'Профиль',
|
|
headerLargeTitle: true,
|
|
}}
|
|
/>
|
|
</ProfileStack.Navigator>
|
|
);
|
|
}
|
|
|
|
export function MainNavigator() {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
tabBarIcon: ({ focused, color, size }) => {
|
|
let iconName: string;
|
|
|
|
if (route.name === 'Chats') {
|
|
iconName = focused ? 'message' : 'message-outline';
|
|
} else if (route.name === 'Contacts') {
|
|
iconName = focused ? 'account-group' : 'account-group-outline';
|
|
} else if (route.name === 'Profile') {
|
|
iconName = focused ? 'account-circle' : 'account-circle-outline';
|
|
} else {
|
|
iconName = 'help';
|
|
}
|
|
|
|
return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
|
|
},
|
|
tabBarActiveTintColor: theme.colors.primary,
|
|
tabBarInactiveTintColor: 'gray',
|
|
headerShown: false,
|
|
tabBarStyle: {
|
|
backgroundColor: theme.colors.surface,
|
|
borderTopColor: theme.colors.outlineVariant,
|
|
borderTopWidth: 1,
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name="Chats"
|
|
component={ChatsStackNavigator}
|
|
options={{
|
|
tabBarLabel: 'Чаты',
|
|
tabBarBadge: undefined, // Здесь можно показывать количество непрочитанных
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Contacts"
|
|
component={ContactsStackNavigator}
|
|
options={{
|
|
tabBarLabel: 'Контакты',
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Profile"
|
|
component={ProfileStackNavigator}
|
|
options={{
|
|
tabBarLabel: 'Профиль',
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
} |