Как сделать закругленные углы на панели вкладок в React Native с помощью React Navigation?

Куча:

  • React Native
  • React Navigator
  • Только основные компоненты

У меня на TabNavigator.tsx такой стиль:

const styles = StyleSheet.create({
  tabStyle: {
    backgroundColor: colors.background,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    height: 80,
    overflow: 'hidden',
    // position: 'absolute', // needed to ensure the bar has a transparent background in the corners
  },
})

Я продолжаю комментировать положение абсолютное, за углами всегда есть фон, что делает его странным, когда прокручивается компонент другого цвета.

Вот он, для наглядности окрашенный в желтый цвет:

Фон

Если я не комментирую абсолютную позицию, содержимое перетекает за панель вкладок, что делает его более естественным.

Но...

Мне нужно добавить нижнее поле на каждом экране, чтобы компенсировать пространство, которое занимает вкладка, или содержимое внизу скрыто.

Я чувствую, что должна быть хорошая практика или известный шаблон, может быть, проверенный обходной путь, который облегчил бы мою жизнь. У тебя есть идея?

Спасибо


react-native react-navigation react-navigation-bottom-tab react-native-component
person Xiiryo    schedule 02.10.2020    source источник
comment
Отвечает ли это на ваш вопрос? Изменить цвет контейнера нижней панели для реагирующей навигации вкладки в React Native   -  person Guruparan Giritharan    schedule 02.10.2020
comment
Вид. Это то, что я сделал, но затем мне нужно добавить нижнее поле или (в списках) компонент void с фиксированной высотой на каждом подэкране ...   -  person Xiiryo    schedule 02.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Ах, это просто, после проб и ошибок я обнаружил, что просто добавьте к нему Border Radius и убедитесь, что в barStyle скрыто переполнение. Здесь я вставил отрывок для него.

barStyle:{
    borderRadius:50,
    backgroundColor:"orange",
    position: 'absolute',
    overflow:'hidden',
    left: 0,
    bottom: 0,
    right: 0,
    padding:5,
}
person Suyash Vashishtha    schedule 19.05.2021