我正在使用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宽度。