Как вертикально центрировать вкладки внутри панели вкладок в React Native

Я создал навигатор в react native, используя 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>
  );
};

react-native javascript react-navigation flexbox tabnavigator
person HTB    schedule 09.01.2019    source источник

Ответы (3)


arrow_upward
5
arrow_downward

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

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

person HTB    schedule 09.01.2019

arrow_upward
4
arrow_downward

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

tabBarOptions: {
  tabStyle: {
    justifyContent: 'center'
  },
  showIcon: false
}
person Sid    schedule 24.03.2019

arrow_upward
0
arrow_downward

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

person Ilker Kadir Ozturk    schedule 09.01.2019
comment
Спасибо за ответ. Я думал об этом, но вопрос в том, как? Все, что у меня есть, это const App = createAppContainer(TabNavigator); - person HTB; 09.01.2019