TabNavigator indivisual tabStyle

时间:2017-06-24 11:39:16

标签: react-native react-navigation

我正在使用https://reactnavigation.org/docs/navigators/tab中的tabNavigator,我有以下配置。

const DiscoverTabNavigatorTop = TabNavigator({

  'Restaurants': {
    screen: props => <DiscoverTabNavigatorTopScreen screenProps={{...props}} /> ,
    navigationOptions: ({navigation}) => ({
      title: `${(navigation.state.params && navigation.state.params.Restaurants) || ''} RESTAURANTS`
    })
  },

  'Markets': {
    screen: props => <DiscoverTabNavigatorTopScreen screenProps={{...props}} /> ,
    navigationOptions: ({navigation}) => ({
      title: `${(navigation.state.params && navigation.state.params.Markets) || ''} MARKETS`
    })
  },

  'Mosques': {
    screen: props => <DiscoverTabNavigatorTopScreen screenProps={{...props}} /> ,
    navigationOptions: ({navigation}) => ({
      title: `${(navigation.state.params && navigation.state.params.Mosques) || ''} MOSQUES`
    })
  }

}, {
  tabBarComponent: TabBarBottom,
  lazy: true,
  swipeEnabled: true,
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    labelStyle: {
      fontSize: 11.2,
      fontFamily: 'HelveticaNeueBd',
      color: '#4B4C4B',
      paddingBottom: 5,
      paddingHorizontal: 7
    },
    indicatorStyle : {
      backgroundColor: 'transparent'
    },
    style : {
      borderBottomColor: '#ebcccc',
      borderBottomWidth: 2,
      elevation : 0,
      height: 33
    },
    tabStyle: {
      width: 100
    }
    activeBackgroundColor : 'rgba(153,0,0,0.2)',
    inactiveBackgroundColor: '#fff',
    upperCaseLabel: false
  }
});

工作正常,但我希望每个标签有不同的宽度。我使用

设置了标签样式
tabStyle: {
  width: 100
} 

但它将所有标签设置为100宽度。

0 个答案:

没有答案