Как установить activeBackgroundColor в реагировать родной для createMaterialTopTabNavigator?

Question

Я хочу установить значение по умолчанию активным и неактивным backGroundColor для createMaterialTopTabNavigator

в моем приложении. но это не сработало правильно.

Я пытался поставить их в стиле или tabBarStyle, а также в navigationOptions, но это не ответ

Hotel:{
screen: Hotel,
navigationOptions: {
  activeBackgroundColor:  '#fff',
  inactiveBackgroundColor: '#E9EEF6',

  header: null, headerMode: 'none',swipeEnabled:false,
  tabBarIcon: ({ focused }) => {
    const image = focused
    ? activeHotel
    : deactiveHotel
    return (
      <Image
        style={{ width: 50, height: 50 }}
        source={image}
        />
    )}
  }
},
Travel:{
  screen: Travel,
  navigationOptions:{
    header: null, headerMode: 'none',swipeEnabled:false,
    activeBackgroundColor:  '#fff',
    inactiveBackgroundColor: '#E9EEF6',

    tabBarIcon: ({ focused }) => {
      const image = focused
      ? activeTravel
      : deactiveTravel
      return (
        <Image
          style={{ width: 50, height: 50 }}
          source={image}
          />
      )}
    }
  },
},
{
  tabBarOptions: {
    showIcon : true,
    showLabel : false,
    tabStyle: {
      height :100
    },
    style: {
      backgroundColor : '#E9EEF6',
      elevation:0
    },
    indicatorStyle :{
      backgroundColor : 'transparent',
      height :20,
    }
  }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  },
},

Я поставил их на стиль или TabStyle, но это не сработало. когда я удаляю

  backgroundColor : '#E9EEF6',

цвет обеих вкладок становится синим (цвет по умолчанию). есть ли ответ или предложение по этой проблеме?

Answer 1

Я решаю свою проблему, редактируя стиль и tabStyle.в tabStyle я устанавливаю backgroundColor для активной вкладки и устанавливаю backgroundColor для неактивной вкладки в стиле.

  style: {
    elevation : 0,
    height : 100,
    backgroundColor: 'white',  //deactiveColor
    justifyContent:'center',
    flexDirection : 'column',
  },
  tabStyle: {
    paddingTop : 20,
    backgroundColor: '#1B275A',  //activeColor
    justifyContent:'space-between',
    flexDirection : 'column',
    height : 100,
  },

Answer 2

К сожалению, вы не можете установить активный и неактивный фон для topTab. Вы можете сделать это только для BottomTab.

Но вы можете установить inactive и activeTintColor для topTab