Rembourrage supplémentaire TabNavigator

Question

Comment styliser la hauteur et le rembourrage TabNavigator Tab? Im procédant comme suit:

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

Comment puis-je me débarrasser du rembourrage entre l'icône et l'étiquette? J'ai fait padding:0 en iconStyle et aussi en tabStyle mais pas de chance. Je ne veux pas de rembourrage sous le label aussi. Comment je fais ça? Merci.

trouvé le rembourrage supplémentaire est causée par View:

Comment puis-je me débarrasser de cela?

Answer 1

juste essayer style sous tabBarOptions

tabBarOptions: { 
    style: { 
     height: 45 
    } 
    } 

Answer 2

Malheureusement beaucoup de paramètres de mise en page sont hardcoded dans cette lib (comme padding: 12 pour onglet qui vient par défaut d'ailleurs).

La seule option est de regarder dans node_modules \ reac-navigation \ lib \ views \ TabView \ fichiers et de les ajuster selon vos besoins.

En ce moment, je suis en train de hacker ces sourses pour trouver une manière rapide et n-sale d'autoriser les icônes tabulaires rectangulaires (x> y), pas seulement carrées (x = y, par défaut).

Autre option est de créer votre composant tabBar personnalisé comme mainteneurs suggèrent