如何设计TabNavigator的选项卡?

我有这样一个看起来很丑陋的TabNavigator默认选项卡。我如何添加样式像Instagram?如何设计TabNavigator的选项卡?

我想设置的选项卡导航的背景white(不是灰色),并设置边框与线之上。另外,我想将活动图标颜色设置为黑色。 (只是像INSTAGRAM ..!)

我不知道我可以把这些样式放在我的TabNavigator。

export default TabNavigator(

{

Feed: {

screen: FeedStackNavigator,

},

...

},

{

navigationOptions: ({ navigation }) => ({

header: null,

tabBarIcon: ({ focused }) => {

const { routeName } = navigation.state;

let iconName;

switch (routeName) {

case 'Feed':

iconName = Platform.OS === 'ios'

? `ios-information-circle${focused ? '' : '-outline'}`

: 'md-list-box';

break;

}

谢谢! :)

回答:

react-navigation有很多不同的properties for stylingTabNavigator。您可以使用它们来设计您的图标和TabBar本身。

tabBarOptions: { 

activeTintColor: '#e91e63',

labelStyle: {

fontSize: 12,

},

style: {

backgroundColor: 'blue',

},

}

以上是 如何设计TabNavigator的选项卡? 的全部内容, 来源链接: utcz.com/qa/266517.html

回到顶部