React Native Navigation底部Tab栏图标iOS端垂直居中异常

问题背景 #

用Expo开发的React Native应用，Web端底部Tab Bar图标能正常垂直居中，但在Expo Go iOS端测试时，图标明显偏移（偏上）。试过给图标加父容器居中、设置tabBarIconStyle的textAlignVertical等方法，都没解决。

现有代码 #

导航器代码 #

<TabNav.Navigator screenOptions={TabNavOptions}>
    <TabNav.Screen
        name="Home"
        component={HomeScreen}
        options={{
            tabBarIconStyle: { textAlignVertical: "center", textAlign: "center" },
            tabBarIcon: ({ color, size }) => (
                <View style={{}}>
                    <Ionicons name="home" color={color} size={size} style={{ textAlignVertical: "center" }} />
                </View>
            ),
        }}
    />
    <TabNav.Screen name="Workouts" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="barbell" color={color} size={size} /> }} />
    <TabNav.Screen name="Exercises" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="bicycle" color={color} size={size} /> }} />
</TabNav.Navigator>

导航器配置 #

const TabNavOptions: BottomTabNavigationOptions = {
    tabBarShowLabel: false,
    tabBarActiveTintColor: "#4B7079",
    tabBarInactiveTintColor: "#FFFFFF",
    tabBarStyle: { width: "90%", height: 60, position: "absolute", left: "5%", bottom: 30, borderRadius: 100, borderTopWidth: 0, backgroundColor: "#75B1BC" },
};

效果对比 #

Web端（预期效果） #

iOS端（问题效果） #

解决方法 #

方法1：强制图标容器flex居中 + 移除Tab Bar默认内边距 #

iOS端的Bottom Tab Bar默认带垂直内边距，且textAlignVertical在原生组件中不生效。直接给图标外层View加flex布局，同时修改Tab Bar样式去掉内边距：

1. 修改每个tabBarIcon的外层View样式：

tabBarIcon: ({ color, size }) => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Ionicons name="home" color={color} size={size} />
    </View>
)

2. 更新TabNavOptions的tabBarStyle，添加paddingVertical: 0：

const TabNavOptions: BottomTabNavigationOptions = {
    tabBarShowLabel: false,
    tabBarActiveTintColor: "#4B7079",
    tabBarInactiveTintColor: "#FFFFFF",
    tabBarStyle: { 
        width: "90%", 
        height: 60, 
        position: "absolute", 
        left: "5%", 
        bottom: 30, 
        borderRadius: 100, 
        borderTopWidth: 0, 
        backgroundColor: "#75B1BC",
        paddingVertical: 0 // 移除iOS默认垂直内边距
    },
};

方法2：全局设置Tab项布局 #

不想逐个改图标的话，直接在TabNavOptions里加tabBarItemStyle，统一让所有Tab项居中：

const TabNavOptions: BottomTabNavigationOptions = {
    tabBarShowLabel: false,
    tabBarActiveTintColor: "#4B7079",
    tabBarInactiveTintColor: "#FFFFFF",
    tabBarStyle: { /* 原有样式 */ },
    tabBarItemStyle: { justifyContent: 'center', alignItems: 'center' } // 新增全局Tab项布局
};

方法3：升级React Navigation版本 #

如果用的是旧版@react-navigation/bottom-tabs，可能存在iOS布局bug，升级到最新稳定版试试：

npm install @react-navigation/bottom-tabs@latest
# 或者yarn
yarn upgrade @react-navigation/bottom-tabs@latest

问题原因 #

Web端基于DOM布局，textAlignVertical能正常生效；但iOS端的Tab Bar是原生组件实现，默认布局逻辑与Web端不同，原生组件对CSS类属性支持有限，因此需要通过flex布局或调整内边距来绕过限制。

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