如何在 reactive native 中为 createMaterialTopTabNavigator 设置 acti

Question

我想为createMaterialTopTabNavigator设置默认的活动和非活动backGroundColor

在我的应用程序中，但它无法正常工作。

我试图把它们放在风格或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

不幸的是，您无法为 topTab 设置活动和非活动背景。您只能对底部选项卡执行此操作。

但是，您可以为 topTab 设置非活动和活动 TintColor

Answer 2

我通过编辑样式和选项卡样式来解决我的问题。 在选项卡样式中，我为活动选项卡设置了背景颜色，并为样式中的非活动选项卡设置了背景颜色。

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