隐藏TabNavigator中的标签 - ReactNavigation

Question

如何隐藏标签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}
  }
});

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

Answer 1

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

showIcon - 是否显示选项卡的图标,默认为false

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

Answer 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}} />
    )
  }
},