React Navigation Нижняя панель вкладок Расстояние между значками

Я использую React Navigation с React Native. Это на Android.

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

  2. Я пытаюсь изменить цвет нижней границы, т.е. желтую линию.

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

Есть идеи, как я могу этого добиться?

{
    tabBarPosition: 'bottom',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
      showIcon: true,
      labelStyle: {
        fontSize: 8
      },
      style: {
        backgroundColor: 'grey',
      },
      tabStyle: {
        height: 49
      },
      iconStyle: {
        flexGrow: 0,
        marginTop: 1.5
      }
    }
  }

BottomTabBar


react-native javascript react-navigation
person Kelvin    schedule 10.07.2017    source источник
comment
Очень сложно помочь. Можешь положить это в закуску? snake.expo.com   -  person Chiamaka Nwolisa    schedule 10.07.2017

Ответы (3)


arrow_upward
16
arrow_downward

Что касается первой проблемы, связанной с расстоянием между значком и верхней частью панели вкладок, вы можете добавить отступ к свойству tabStyle в tabBarOptions:

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

Чтобы уменьшить расстояние между значком и меткой, вы можете добавить отступ или поле к вашему Icon объекту:

tabBarIcon: ({ tintColor }) => {
    return <Icon containerStyle={{ marginTop: 6 }} name="map" size={25} color={tintColor} />;
},

Что касается проблемы с активной желтой линией на Android, вы можете изменить свойство цвета фона на transparent или установить 0 для высоты:

tabBarOptions: {
    indicatorStyle: {
        height: 0
    }
}

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

Вы можете попытаться сделать навигацию меньше (например: width: '80%') ... это приведет к тому, что ячейки будут ближе друг к другу ... но я никогда не пробовал этого и не уверен, что это хорошее решение;)

person Hristo Eftimov    schedule 01.11.2017
comment
вы должны использовать renderIndicator: () => null,, чтобы не отображать выделение внизу. - person Boomer Rogers; 09.05.2018
comment
paddingVertical, похоже, не меняет расстояние между значком и верхней панелью. - person Dr. Younes Henni; 29.11.2019

arrow_upward
1
arrow_downward

Попробуйте опцию конфигурации indicatorStyle:

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}
person Francesco    schedule 15.09.2017

arrow_upward
1
arrow_downward

Чтобы изменить расстояние между значком и верхней частью панели (вопрос 1 в response-navigation 4.x), добавьте отступ к tabStyle внутри tabBarOptions:

tabBarOptions: {
    tabStyle: {
      paddingBottom: 8,
      paddingTop: 8,
    }
}
person Dr. Younes Henni    schedule 29.11.2019