TabNavigator-extra Polsterung
Wie Stil der TabNavigator Tab height und padding? Im das tun Sie Folgendes:
import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
TabItem1: {
screen: MainScreen,
navigationOptions: {
tabBarLabel:"Home",
tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
}
},
TabItem2: {
screen: MainScreen,
navigationOptions: {
tabBarLabel:"Home",
tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor} />
}
},
TabItem3: {
screen: MainScreen,
navigationOptions: {
tabBarLabel:"Browse",
tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
}
}
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#222',
activeBackgroundColor :'yellow', //Doesn't work
showIcon: true,
tabStyle: {
padding: 0, margin:0, //Padding 0 here
},
iconStyle: {
width: 30,
height: 30,
padding:0 //Padding 0 here
},
}
});
Wie kann ich loswerden der Abstand zwischen dem Symbol und der Beschriftung? Ich habe padding:0
im iconStyle
und auch in tabStyle
aber kein Glück. Ich will keine Polsterung unterhalb des label
zu. Wie mache ich das? Danke.
Gefunden, die extra-Polsterung ist verursacht durch View
:
Wie kann ich es loswerden?
InformationsquelleAutor Somename | 2017-10-18
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gelöst, indem die Einstellung:
Leider viel layout-Einstellungen sind hardcoded in dieser lib (wie Polsterung: 12 für die Registerkarte, die standardmäßig kommt von irgendwo).
Die einzige Möglichkeit ist zu schauen, in node_modules\reagieren-navigation\lib\views\TabView\ Dateien und passen Sie nach Bedarf an Ihre Anforderungen.
Momentan bin ich hacken diese sourses finden Sie eine quick-n-dirty " - Weise zu ermöglichen, rechteckig (x>y), nicht nur Quadrat (x=y, wie ausgefallen) tab icons.
Andere Möglichkeit ist die Erstellung eigener tabBar-Komponente als Betreuer vorschlagen
Versuchen nur
style
untertabBarOptions
paddingHorizontal:0, paddingVertical:0
aber nicht funktioniert.Ich hatte ein ähnliches problem, und ich löste es durch überschreiben der spezifischen Polsterung Eigenschaften, die Sie wollen (wie
paddingTop
oderpaddingLeft
) anstatt nurpadding
.Ich habe es nur durch suchen auf diese Seite https://reactnavigation.org/docs/en/material-top-tab-navigator.html
meine TabStack sieht wie folgt aus: