Как изменить цветовые стили для навигатора вкладок в React Native?

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

export const MyApp = TabNavigator({
  Asset: {
   screen: AssetScreen
  },
 Sensors: {
  screen: sensorsStack
 },
 Settings: {
  screen: settingStack
 },
},{
tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled:false,
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'grey',
tabStyle:{
    marginTop:10,
    height :53,
    borderRightWidth:1
},
labelStyle: {
    fontSize: 15,
    fontWeight:'bold',
     marginTop: 0,
     color :'#ffffff'
  },
 },
});

Любое предложение будет принята с благодарностью.


react-native tabnavigator
person HungrySoul    schedule 10.11.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать свойства activeBackgroundColor и inactiveBackgroundColor в разделе tabBarOptions, чтобы установить цвет для активных и неактивных вкладок.

Дополнительную информацию см. в документе здесь.

person Prasun    schedule 10.11.2017
comment
Эти два свойства (activeBackgroundColor, inactiveBackgroundColor) помогли мне раскрасить «активные» и «неактивные» вкладки. Даже я попробовал с вашими tabBarOptions (отредактировал один), и это сработало, как и ожидалось. - person Prasun; 14.11.2017
comment
Проверял только на iOS, на Android не проверял. - person Prasun; 15.11.2017
comment
на ios работает, а на android не нашел. Есть ли способ сделать это на обоих устройствах. - person HungrySoul; 15.11.2017
comment
Да, в Android это не работает, вам нужно добавить больше стилей для Android. Я добавил стили, такие как indicatorStyle: { backgroundColor: '#2394C7', height: 53 }, style: { backgroundColor: 'grey' } под tabBarOptions, и он отлично работает. Взгляните на проблему с Android ( github.com/react-community/react-navigation /выпуски/1485) - person Prasun; 17.11.2017