Как увеличить расстояние между одним значком и другим значком в нижних вкладках материалов в react-native

Я использую @react-navigation/material-bottom-tabs в своем родном приложении. Как я могу увеличить расстояние между значками и выровнять их одинаково в зависимости от ширины устройства.

react-native: 0.62.1 @react-navigation/native: ^5.1.5 @react-navigation/material-bottom-tabs: ^5.1.8

Текущее поведение

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

Ожидаемое поведение

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

введите здесь описание изображения


react-native react-navigation-bottom-tab
person Pratap Penmetsa    schedule 12.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

<Tab.Navigator
  initialRouteName="Home"
  activeColor="#f0edf6"
  inactiveColor="#3e2465"
  barStyle={{ backgroundColor: '#694fad' }}
>
  {/* ... */}
</Tab.Navigator>

Существует такая поддержка, как barStyle, вы можете добавить свои собственные стили для навигатора вкладок. Надеюсь, это решит вашу проблему.

person Krishna Kiran    schedule 12.04.2020
comment
<Tab.Navigator initialRouteName={this.state.selectedTab} activeColor="#fc8019" inactiveColor="#fc8019" barStyle={{ backgroundColor: '#FFF',width:width }} > {/* ... */} </Tab.Navigator> я использовал этот стиль, но бесполезно - person Pratap Penmetsa; 12.04.2020
comment
попробуйте использовать гибкие стили, не указывая ширину, - person Krishna Kiran; 13.04.2020
comment
‹Tab.Navigator initialRouteName={this.state.selectedTab} activeColor=#fc8019 inactiveColor=#fc8019 barStyle={{ backgroundColor: '#FFF'}} › ‹Tab.Screen name=Главный компонент={Main} options={{ tabBarLabel: 'Главная', tabBarIcon: ({ color }) =› ( ‹Иконка name=home color={color} size={26} /› ), }} /› ‹/Tab.Navigator› - person Pratap Penmetsa; 13.04.2020