如何在createMaterialTopTabNavigator的native native中设置activeBackgroundColor？

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,
  },
},

我把它们放在Style或TabStyle上，但它不起作用。当我删除

  backgroundColor : '#E9EEF6',

两个选项卡颜色变为蓝色（默认颜色）。这个问题有什么答案或建议吗？

Answer 1

不幸的是，您无法为topTab设置活动和非活动背景。你只能为BottomTab这样做。

但是，您可以为topTab设置inactive和activeTintColor

Answer 2

我通过编辑样式和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,
  },