Tab Bar Icons not vertically centered React Native Navigation答案

【问题标题】：Tab Bar Icons not vertically centered React Native NavigationTab Bar Icons not vertically centered React Native Navigation
【发布时间】：2022-11-20 23:04:02
【问题描述】：

When testing my react native app (with expo) through the expo go IOS app the icons are not vertically centered, however when testing on web they are vertically centered. I have tried giving each icon a parent div and centering it vertically, giving it a TabBarIconStyle of textAlignVertical: center, and textAlign: center, everything I can think of to vertically align these icons.

My Navigator:

<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>

My screen options for the 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" },
    };

This is what it looks like on web (and what it should look like)

This is what it looks like on expo go

【问题讨论】：

标签： ios typescript react-native expo expo-go

【解决方案1】：

Try adding this to the styling of the parent view of each icon:

{flex: 1, alignItems: "center" }

【讨论】：

Unfortunately, that didn't work, do you have any other suggestions?

【解决方案2】：

I managed to fix this issue with paddingBottom: 0 within the Navigator options, not sure why it only appeared on IOS would love insight if someone has an idea why.

【讨论】：