TabNavigatorでラベルを非表示 - ReactNavigation

Question

TabNavigatorのラベルを非表示にするにはどうすればiconsのみ表示しますか？私は次のような場合：私はnavigationOptionsからtitleを削除した場合

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

をそれが（HomeまたはSearch）タブの名前が表示されます。私は、アイコンを表示し、アクティブなの色を変更したいだけですicon。 activeTintColorアイコンのために働いていません。

Answer 1

TabNavigatorはshowLabelと設定できます。詳細はdocsを参照してください。

showIcon - タブのアイコンを表示するかどうか、デフォルトがshowLabel

偽である - タブのラベルを表示するかどうか、デフォルトでは、ここで

Answer 2

真で示すの一例ですラベルのないアイコン。

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

私はあなたが各タブのためtabBarIconを定義し、それにtintColorを渡す必要がアクティブなタブのアイコンの色を変えるcolor.forアクティブなタブのラベルを変更するためのtintColorとactiveTintColorを定義しました。たとえば、検索タブがある場合は、次のようにすることができます。

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