選項卡欄圖標不是垂直居中的 React Native Navigation

Question

當通過 expo go IOS 應用程序測試我的 React 本機應用程序（帶有 expo）時，圖標不是垂直居中的，但是在 web 上測試時，它們是垂直居中的。 我試過給每個圖標一個父 div 並將其垂直居中，給它一個 TabBarIconStyle 的 textAlignVertical: center 和 textAlign: center，我能想到的所有垂直對齊這些圖標的方法。

我的導航器：

<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 上的樣子（以及它應該的樣子）

這是它在 expo go 上的樣子

Answer 1

我設法在 Navigator 選項中使用paddingBottom: 0解決了這個問題，不確定為什么它只出現在 IOS 上，如果有人知道原因，我會很高興。

Answer 2

嘗試將其添加到每個圖標的父視圖的樣式中：

{flex: 1, alignItems: "center" }