Как вертикально центрировать вкладки внутри панели вкладок в режиме реагирования

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

Я нашел решение сам и делюсь им для людей, у которых такая же проблема. Причина, по которой нижний интервал всегда существует, заключается в том, что реквизит называется safeAreaInset, а его значение по умолчанию - { bottom: 'always', top: 'never' }

.

Все, что мне нужно было сделать, это изменить значение для bottom на never, и это не добавит пробела внизу!

Answer 2

Это связано с тем, что над значком присутствует значок компонента. Чтобы скрыть значок компонента, я добавил следующий код.

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

Answer 3

Я думаю, что вы должны обернуть панель вкладок в представление и добавить justifyContent туда