如何在本机反应中将标签栏中的标签垂直居中答案

【问题标题】：How to vertically centre tabs inside tab bar in react native如何在本机反应中将标签栏中的标签垂直居中
【发布时间】：2019-06-04 13:35:55
【问题描述】：

我使用来自https://reactnavigation.org/docs/en/bottom-tab-navigator.html 的createBottomTabNavigator 在本机反应中创建了一个导航器

我遇到的问题是我找不到在标签栏中垂直居中标签的方法。

正如您在screenshot 中看到的那样，标签底部总是有那个蓝色区域。即使我手动设置选项卡的高度，它们也会向上增长。如果我为标签栏设置flex:1，它会占据屏幕的一半，但蓝色区域仍然存在。

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

这就是我创建导航栏的方式（为简单起见，我删除了图标）：

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>
  );
};

【问题讨论】：

标签： javascript react-native flexbox react-navigation tabnavigator

【解决方案1】：

我自己找到了解决方案，并将其分享给有同样问题的人。底部间距始终存在的原因是因为一个名为 safeAreaInset 的道具，其默认值为 { bottom: 'always', top: 'never' }

我所要做的就是将bottom 的值更改为never，它不会在底部添加任何间距！

【讨论】：

【解决方案2】：

这是由于标签上方存在图标组件。为了隐藏图标组件，我添加了以下代码。

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

【讨论】：

【解决方案3】：

尝试使用 v 6.x

tabBarStyle:{ paddingBottom: 0 }

【讨论】：

【解决方案4】：

如果您没有显示图标，请在标签样式中添加{position: 'absolute', textAlignVertical: 'center'}，例如：

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

【讨论】：

【解决方案5】：

我认为你应该将标签栏包装在一个视图中并在那里添加 justifyContent

【讨论】：

感谢您的回复。我在想，但问题是怎么做？我只有const App = createAppContainer(TabNavigator);