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

Question

我创建了一个导航仪反应中使用原生createBottomTabNavigator从https://reactnavigation.org/docs/en/bottom-tab-navigator.html

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

正如您在屏幕截图中看到的，选项卡底部总是有蓝色区域。即使我手动设置标签的高度，它们也会向上生长。如果我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>
  );
};

Answer 1

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

我所要做的就是改变价值bottom来never，它不会将任何间隔添加到底！