如何在 React Native 中垂直居中标签栏中的标签

Question

I've created a navigator in react native using createBottomTabNavigator from https://reactnavigation.org/docs/en/bottom-tab-navigator.html

The problem I'm having is that I can't find a way to vertically centre the tabs inside the tab bar.

As you can see in the screenshot there is always that blue area at the bottom of the tabs. Even when I manually set the height for the tabs, they grow upward. If I set flex:1 for the tab bar, it takes half of the screen, but the blue area still exists.

tabBar: {
  backgroundColor: 'blue',
  borderWidth: 2,
  height: 32,
  justifyContent: 'center',
  alignItems: 'center',
  padding: 0
},
labelStyle: {
  backgroundColor: 'green',
},
tabStyle: {
  backgroundColor: 'yellow',
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'center',
  borderWidth: 1,
  borderColor: 'black',
  marginBottom: 0,
  paddingBottom: 0,
},

and this is how I create the nav bar (I removed the icons for simplicity):

const TabNavigator = createBottomTabNavigator(
  {
    screen1: { screen: screen1 },
    screen2: { screen: screen2 },
    screen3: { screen: screen3 },
    screen4: { screen: screen4 },
  },
  {
    tabBarOptions: {
      style: styles.tabBar,
      labelStyle: styles.labelStyle,
      tabStyle: styles.tabStyle
    },
  }
);

const App = createAppContainer(TabNavigator);

export default () => { 
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
      <App />
    </SafeAreaView>
  );
};

Answer 1

This is due to icon component present above label. To hide icon component i added follow code.

tabBarOptions: {
  tabStyle: {
    justifyContent: 'center'
  },
  showIcon: false
} 

Answer 2

我认为您应该将标签栏包装在视图中并在其中添加justifyContent

Answer 3

I found the solution myself and I'm sharing it for people who have the same problem. The reason the bottom spacing is always there is because of a prop called safeAreaInset and its default value is { bottom: 'always', top: 'never' }

All I had to do was to change the value for bottom to never and it won't add any spacing to the bottom!

Answer 4

尝试将 v 6.x

tabBarStyle:{ paddingBottom: 0 }

Answer 5

If you not showing icon add {position: 'absolute', textAlignVertical: 'center'} in label style, example:

<Tab.Navigator
  screenOptions={{
      tabBarIconStyle: {display: 'none'},
      tabBarStyle: {
        height: 40,
      },
      tabBarLabelStyle: {
        fontSize: 20,
        position: 'absolute',
        textAlignVertical: 'center',
      },  

}}>