小编典典

在TabNavigator中隐藏标签-ReactNavigation

reactjs

如何隐藏标签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的名称(HomeSearch)。我只想显示图标并更改活动图标的颜色iconactiveTintColor不适用于图标。


阅读 455

收藏
2020-07-22

共1个答案

小编典典

TabNavigatorshowLabel可以设置的道具。有关更多信息,请参阅v1
文档v2文档

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

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

2020-07-22