Конфигурация TabBar в React Navigation

Ниже представлен улучшенный вариант настройки компонента Tabs и его панели вкладок (tabBar). Изменения направлены на повышение читаемости, логичности и поддержки кода.

1. Настройка компонента Tabs

Для создания навигации с вкладками используется компонент Tabs. Каждая вкладка определяется через дочерний элемент Tabs.Screen. Пример структуры:

<Tabs screenOptions={{ tabBarStyle: styles.tabBar }}>
    <Tabs.Screen ... />
    <Tabs.Screen ... />
    <Tabs.Screen ... />
</Tabs>

Обратите внимание: свойство screenOptions позволяет задать общие стили для всех экранов, включая саму панель вкладок.

2. Стили панели вкладок (tabBarStyle)

Для единообразного отображения панели вкладок рекомендуется вынести её стили в отдельный объект, например, styles.tabBar. Пример конфигурации:

• display: 'flex' - включает флекс-контейнер для гибкого выравнивания элементов.
• flexDirection: 'row' - располагает вкладки горизонтально (в одну строку).
• justifyContent: 'center' - центрирует вкладки по горизонтали.
• alignItems: 'center' - выравнивает вкладки по вертикали по центру.
• height: 75 - фиксированная высота панели в пикселях.

При необходимости добавьте дополнительные свойства, такие как backgroundColor, borderTopWidth или paddingVertical, для более тонкой настройки внешнего вида.

3. Итоговый рекомендуемый код

// Стили для панели вкладок
const styles = StyleSheet.create({
    tabBar: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 75,
        // Добавьте другие стили при необходимости
    },
});

// Компонент навигации
<Tabs screenOptions={{ tabBarStyle: styles.tabBar }}>
    <Tabs.Screen ... />
    <Tabs.Screen ... />
    <Tabs.Screen ... />
</Tabs>

Такая структура обеспечивает чистоту кода, упрощает его поддержку и позволяет легко изменять внешний вид панели вкладок в одном месте.