iOS - Tabbfältikoner är inte vertikalt centrerade React Native Navigation
När jag testar min React Native-app (med Expo) genom Expo Go-appen för iOS är ikonerna inte vertikalt centrerade, men när jag testar på webben är de vertikalt centrerade. Jag har försökt ge varje ikon en överordnad div och centrera den vertikalt, ge den en TabBarIconStyle med textAlignVertical: center och textAlign: center, allt jag kan tänka på för att vertikalt justera dessa ikoner.
Min navigatör:
<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>
Mina skärmalternativ för Navigatören:
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" },
};
Så här ser det ut på webben (och så här bör det se ut)
Så här ser det ut på Expo Go
Svar #1
Jag lyckades fixa detta problem med paddingBottom: 0 inom Navigator-alternativen, är inte säker på varför det bara dök upp på iOS och skulle gärna vilja få insikt om någon har en idé varför.