Beim Testen meiner nativen React-App (mit Expo) über die IOS-App „Expo Go“ sind die Symbole nicht vertikal zentriert. Beim Testen im Web sind sie jedoch vertikal zentriert. Ich habe versucht, jedem Symbol ein übergeordnetes Div zu geben und es vertikal zu zentrieren, indem ich ihm einen TabBarIconStyle aus textAlignVertical: center und textAlign: center gegeben habe, alles, was mir einfällt, um diese Symbole vertikal auszurichten.
Mein Navigator:
Meine Bildschirmoptionen für den Navigator:
Code: Select all
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" },
};
So sieht es im Web aus (und so sollte es aussehen)
So sieht es auf der Expo go aus
