Masquer les étiquettes dans TabNavigator - ReactNavigation

Question

Comment masquer les étiquettes dans TabNavigator et afficher seulement icons? Si je fais ce qui suit:

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} 
    } 
}); 

Si je retire title du navigationOptions il indique le nom de l'onglet (Home ou Search). Je veux seulement montrer les icônes et changer la couleur du icon actif. activeTintColor ne fonctionne pas pour les icônes.

Answer 1

TabNavigator a showLabel prop que vous pouvez définir. Veuillez vous référer au docs pour plus d'informations.

ShowIcon - afficher l'icône de l'onglet, par défaut est false

showLabel - afficher l'étiquette de l'onglet, par défaut est true

Answer 2

Voici un exemple de montrer Icône sans étiquette.

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

I définis tintColor et activeTintColor pour changer l'étiquette de l'onglet actif color.for changer la couleur de l'icône de l'onglet actif, vous devez définir tabBarIcon pour chaque onglet et passer tintColor à elle. Par exemple, si vous avez un onglet de recherche, vous pouvez le faire comme ceci:

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