在选项卡导航器中隐藏标签 - 反应导航答案

【问题标题】：Hide labels in TabNavigator - ReactNavigation在选项卡导航器中隐藏标签 - 反应导航
【发布时间】：2018-03-27 23:20:00
【问题描述】：

如何隐藏TabNavigator 中的标签而只显示icons？如果我执行以下操作：

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 不适用于图标。

【问题讨论】：

如何有条件地隐藏和显示标签？说标签只有在标签处于活动状态时才显示

标签： reactjs react-native react-navigation tabnavigator

【解决方案1】：

TabNavigator 具有您可以设置的 showLabel 属性。更多信息请参考docs for v1或docs for v2。

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

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

【讨论】：

【解决方案2】：

这是一个显示无标签图标的示例。

tabBarOptions: {
  showLabel: false,
  showIcon: true,
  tintColor: '#333',
  activeTintColor: '#aaa',
}

我定义了 tintColor 和 activeTintColor 来更改活动选项卡的标签颜色。要更改活动选项卡的图标颜色，您需要为每个选项卡定义 tabBarIcon 并将 tintColor 传递给它。例如，如果您有一个搜索选项卡，您可以这样做：

Search: {
  screen: SearchScreen,
  navigationOptions:{
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-search" style={{color:tintColor}} />
    )
  }
},

【讨论】：