代码之家 › 专栏 › 技术社区 › eureka

如何在react native中为createMaterialTopTabNavigator设置ActiveBackgroundColor?

react-navigation react-native

eureka · 技术社区 · 6 年前

我要设置默认的活动和非活动 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',

两个选项卡的颜色都变为蓝色(默认颜色)。这个问题有什么答案或建议吗?

2 回复 | 直到 6 年前

displayname 6 年前

很遗憾,您无法为Toptab设置活动和非活动背景。您只能对底部选项卡执行此操作。

但是,您可以为toptab设置inactive和activetintcolor

eureka 6 年前

我通过编辑样式和tabstyle来解决我的问题。在TabStyle中,我为活动选项卡设置BackgroundColor,在Style中为非活动选项卡设置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,
  },

推荐文章