设置tabBarItemStyle的高度会截断标签react-navigation/material-top-tabs

Question

我正在尝试自定义顶部栏 当我尝试设置高度时，标签没有像我预期的那样向上移动。相反，它是

我做错了什么？需要帮助

这是我的代码

const Tab = createMaterialTopTabNavigator();

const TabNav = (navigation: any, route: any) => (
  <Tab.Navigator
    initialRouteName="Tab1"
    screenOptions={{
      swipeEnabled: false,
      tabBarLabelStyle: {
        fontSize: 14,
        textTransform: 'none',
        position: 'relative',
      },
      tabBarIndicatorStyle: {backgroundColor: '#F69300'},
      tabBarItemStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 30,
        paddingBottom: 10,
        position: 'relative',
      },
      tabBarPressColor: '#FFF',
      tabBarPressOpacity: 0,
    }}>
    <Tab.Screen
      name="Tab1"
      component={FirstTab}
      initialParams={route.params}
      options={{
        tabBarLabel: 'Text cut gggg',
        tabBarIcon: ({color, size}) => (
          <MaterialIcons color={color} size={size} name="online-prediction" />
        ),
      }}
    />
    <Tab.Screen
      name="Tab2"
      component={SecondTab}
      initialParams={route.params}
      options={{
        tabBarLabel: 'Text cut gggg',
        tabBarIcon: ({color, size}) => (
          <MaterialIcons color={color} size={size} name="online-prediction" />
        ),
      }}
    />
    <Tab.Screen
      name="Tab3"
      component={ThirdTab}
      initialParams={route.params}
      options={{
        tabBarLabel: 'Text cut gggg',
        tabBarIcon: ({color, size}) => (
          <MaterialIcons color={color} size={size} name="online-prediction" />
        ),
      }}
    />
  </Tab.Navigator>
);

export default Contact;

我以为是

position: 'absolute'

，所以我将其设置为

relative

，但我认为这不是问题 另外，我希望图标和标签内联，但它也不适用于

justifyContent: 'center'

和

alignItems: 'center'

Answer 1

有什么解决办法吗？我也面临着同样的问题。