选项卡栏图标未垂直居中React Native导航

rn0zuynd 于 2022-11-25 发布在 React

关注(0)|答案(2)|浏览(149)

当通过expo go IOS应用测试我的react原生应用（带expo）时，图标不是垂直居中的，但是当在web上测试时，它们是垂直居中的。我试着给每个图标一个父div并将其垂直居中，给它一个textAlignVertical的TabBarIconStyle：置中和文字对齐：中心，所有我能想到的垂直对齐这些图标的方法。
我的导航器：

<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上的样子（以及它应该是什么样子）