Ausblenden von Labels in TabNavigator - ReactNavigation

Question

Wie blende ich die Beschriftungen in TabNavigator und zeige nur icons? Wenn ich folgendes tun:

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

Wenn ich title vom navigationOptions entfernen zeigt es den Namen des Tab (Home oder Search). Ich möchte nur die Icons anzeigen und die Farbe des aktiven icon ändern. activeTintColor funktioniert nicht für Symbole.

Answer 1

TabNavigator hat showLabel Prop, die Sie festlegen können. Weitere Informationen finden Sie unter docs.

ShowIcon - ob für Tabulatorsymbol zu zeigen, ist standardmäßig falsch

showlabel - ob für Registerkarte Etikett zu zeigen, Standard ist wahr

Answer 2

Hier ist ein Beispiel dafür zeigt, Symbol ohne Label.

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

I definiert tintColor und activeTintColor für die aktive Registerkarte Label Ändern color.for Iconfarbe aktive Registerkarte Ändern Sie tabBarIcon für jede Registerkarte definieren müssen und tintColor es passieren. Wenn Sie beispielsweise eine Suchregisterkarte haben, können Sie Folgendes tun:

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