React Native增大底部TabBar高度后如何垂直居中项？

我用React Native Expo Router创建了底部标签导航，因需求将TabBar高度调整为100，但导航项无法在垂直方向上居中。尝试调整tabBarItemStyle、tabBarStyle和tabBarLabelStyle均未达到预期效果，求可行解决方案。

解决方案 #

问题根源在于Expo Router的Tabs组件默认带有上下内边距，且导航项未占满TabBar的高度空间。只需调整以下几个样式属性即可实现垂直居中：

• 在tabBarStyle中添加justifyContent: 'center'，确保整个TabBar的内容垂直居中，同时移除默认上下内边距
• 给tabBarItemStyle设置flex: 1，让每个导航项占满TabBar的高度，再移除item的默认内边距
• 移除tabBarLabelStyle中的marginTop属性，避免标签偏移

修改后的完整代码 #

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Tabs } from 'expo-router'
import { Colors } from "@/constants/Colors";

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { AntDesign, Entypo, FontAwesome5 } from '@expo/vector-icons';

export default function MainTabsLayout() {
    return (
        <Tabs
            screenOptions={{
                tabBarStyle: {
                    backgroundColor: 'black',
                    borderTopWidth: 0,
                    height: 100,
                    justifyContent: 'center', // 让TabBar内容垂直居中
                    paddingVertical: 0 // 移除默认上下内边距
                },
                tabBarActiveTintColor: Colors.dark.green,
                tabBarInactiveTintColor: Colors.dark.gray,

                tabBarItemStyle: {
                    flex: 1, // 让每个item占满TabBar高度
                    justifyContent: 'center',
                    alignItems: 'center',
                    paddingVertical: 0 // 移除item默认内边距
                },
                tabBarLabelStyle: {
                    fontSize: 12,
                    fontWeight: "700"
                    // 移除marginTop，避免标签偏移
                },

            }}>
            <Tabs.Screen
                name='index'
                options={{
                    headerShown: false,
                    tabBarIcon: ({ color, size, focused }) => <MaterialIcons name="games" size={22} color={focused ? Colors.dark.green : color} />,
                    tabBarLabel: "Matches",
                    tabBarLabelStyle: {
                        fontSize: 12,
                        fontWeight: "700",
                    },

                }}
            />
            <Tabs.Screen
                name='news'
                options={{
                    headerShown: false,
                    tabBarIcon: ({ color, size, focused }) => <Entypo name="news" size={20} color={focused ? Colors.dark.green : color} />,
                    tabBarLabel: "News",
                    tabBarLabelStyle: {
                        fontSize: 12,
                        fontWeight: "700",
                    }
                }}
            />
            <Tabs.Screen
                name='leagues'
                options={{
                    headerShown: false,
                    tabBarIcon: ({ color, size, focused }) => <AntDesign name="Trophy" size={20} color={focused ? Colors.dark.green : color} />,
                    tabBarLabel: "Leagues",
                    tabBarLabelStyle: {
                        fontSize: 12,
                        fontWeight: "700",
                    }
                }}
            />
            <Tabs.Screen
                name='following'
                options={{
                    headerShown: false,
                    tabBarIcon: ({ color, size, focused }) => focused ? <AntDesign name="star" size={20} color={Colors.dark.green} /> : <FontAwesome5 name="star" size={18} color={focused ? Colors.dark.green : color} />,
                    tabBarLabel: "Following",
                    tabBarLabelStyle: {
                        fontSize: 12,
                        fontWeight: "700",
                    }
                }}
            />
            <Tabs.Screen
                name='more'
                options={{
                    headerShown: false,
                    tabBarIcon: ({ color, size, focused }) => <Entypo name="menu" size={20} color={focused ? Colors.dark.green : color} />,
                    tabBarLabel: "More",
                    tabBarLabelStyle: {
                        fontSize: 12,
                        fontWeight: "700",
                    }
                }}
            />
        </Tabs>
    )
}

const styles = StyleSheet.create({})

原理说明 #

Expo Router的Tabs组件基于React Navigation的BottomTabNavigator，默认会给TabBar和每个导航项添加上下内边距，同时导航项未占满TabBar高度。通过设置tabBarStyle的justifyContent: 'center'确保整体内容居中，给tabBarItemStyle添加flex:1让每个项填充高度，再移除多余内边距，就能让图标和标签在垂直方向完美居中。

内容的提问来源于stack exchange，提问作者checkmate