在TabNavigator中隐藏标签-ReactNavigation [英] Hide labels in TabNavigator - ReactNavigation

问题描述

如何隐藏TabNavigator中的标签并仅显示icons?如果我执行以下操作:

How do I hide the labels in TabNavigator and show only icons? If I do the following:

const Tabs = TabNavigator({
  Home: {
    screen:MainHome,
    navigationOptions: ({ navigation }) => ({
        title: "Home",  //Tried to hide this for next tab Search.
        tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="home"/></View>
      })
  },
  Search: {
    screen:TestComp1,
    navigationOptions: ({ navigation }) => ({
      //If no title it shows the name as Search.
      tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="accessibility"/></View>
    })

  }
}, { 

   tabBarPosition: 'bottom',

   tabBarOptions: {
    showIcon: true,
    activeTintColor: '#e91e63',  //Not working for icons.
    inactiveBackgroundColor: 'green', // Not working at all.
    style: {backgroundColor: '#3498DB', height: 60, padding:0, margin:0}
  }
});

如果我从navigationOptions中删除title，它将显示选项卡的名称(Home或Search).我只想显示图标并更改活动icon的颜色. activeTintColor不适用于图标.

If I remove title from the navigationOptions it shows the name of the Tab (Home or Search). I want to only show the icons and change the color of the active icon. activeTintColor not working for icons.

推荐答案

TabNavigator具有可以设置的showLabel道具.有关更多信息，请参阅 v1的文档或 .

TabNavigator has showLabel prop that you can set. For more info please refer to docs for v1 or docs for v2.

showIcon -是否显示标签图标，默认为false

showIcon - whether to show icon for tab, default is false

showLabel -是否显示标签标签，默认为true

showLabel - whether to show label for tab, default is true

这篇关于在TabNavigator中隐藏标签-ReactNavigation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！