javascript - 如何在不自动更改 React Native 中 tabBarIcon 和 tabBarLabel 的位置的情况下增加反应导航 tabBar 的标签栏高度？

Question

当我更改 tabBar 的高度时，我得到了奇怪的结果，tabBarIcon 和 tabBarLabel 彼此分开，并且不会一起留在 tabBar 的中心。例如，当增加它时，它会导致以下图片：

结果截图

我尝试了很多方法来修复它，即使标签栏的高度发生变化，它们也会保持在一起，但我找不到一个好的解决方案。我出现在android和ios上。有人可以帮助解决这个问题吗？这是我当前的代码：

<NavigationContainer>
     <Tab.Navigator screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName: string = "";

            if (route.name === TRANSLATIONS.navigation.tabBar.dashboard) {
              iconName = 'ios-clipboard'
            } else if (route.name === TRANSLATIONS.navigation.tabBar.search) {
              iconName ='md-search';
            } else if (route.name === TRANSLATIONS.navigation.tabBar.offer) {
              size = 35
              iconName ='ios-add';
            } 

            return <Ionicons name={iconName} size={size} color={color} />;
          },
       })}
       tabBarOptions={{
          activeTintColor: THEME.colors.greenPrimary,
          inactiveTintColor: THEME.colors.grey,
          keyboardHidesTabBar: true,
          style: {
            height: 100, 
          },
          
       }}>

       <Tab.Screen name={TRANSLATIONS.navigation.tabBar.search} component={SearchStack} options={({ route }) => ({tabBarVisible: getTabBarVisible(route) })}/>
       <Tab.Screen name={TRANSLATIONS.navigation.tabBar.dashboard} component={DashboardStack} options={({ route }) => ({tabBarVisible: getTabBarVisible(route) })} />
       <Tab.Screen name={TRANSLATIONS.navigation.tabBar.offer} component={OfferStack} options={({ route }) => ({tabBarVisible: getTabBarVisible(route) })}/>
     </Tab.Navigator>
   </NavigationContainer>

标签： javascriptreact-nativereact-navigation