Javascript 如何在react native中垂直居中选项卡栏内的选项卡

我已经在react native中使用

createBottomTabNavigator

from创建了一个导航器

我遇到的问题是，我找不到一种方法将选项卡垂直居中放置在选项卡栏内

正如您在中看到的，选项卡底部总是有蓝色区域。即使我手动设置选项卡的高度，它们也会向上增长。如果我为选项卡栏设置

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(
{
屏幕1:{screen:screen1}，
屏幕2:{screen:screen2}，
屏幕3:{screen:screen3}，
屏幕4:{screen:screen4}，
},
{
选项卡选项：{
style:styles.tabBar，
labelStyle:styles.labelStyle，
tabStyle:styles.tabStyle
},
}
);
const App=createAppContainer（TabNavigator）；
导出默认值（）=>{
返回(
);
};

我认为您应该将选项卡栏包装在视图中，并在其中添加justifyContent

我自己找到了解决方案，并将其分享给有相同问题的人。底部间距始终存在的原因是一个名为

safeAreaInset

的道具，其默认值为

{bottom:'always'，top:'never'}

---

我所要做的就是将

bottom

的值更改为

never

，这样就不会在底部添加任何间距

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

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

---

谢谢你的回复。我在想，但问题是怎么做？我所拥有的就是

const-App=createAppContainer（TabNavigator）
tabBarOptions: {
  tabStyle: {
    justifyContent: 'center'
  },
  showIcon: false
}