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

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

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

Answer 2

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

如何在createMaterialTopTabNavigator的React Native中设置activeBackgroundColor？

2 个答案: