TabNavigator extra Polsterung

Question

Wie style die Höhe und Polsterung der TabNavigator Tab? Im Sie folgendermaßen vorgehen:

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 die Polsterung zwischen dem Symbol loszuwerden und dem Label? Ich habe padding:0 in iconStyle und auch in tabStyle aber kein Glück. Ich möchte keine Polsterung unter dem label auch. Wie mache ich das? Vielen Dank.

Gefunden die zusätzliche Polsterung von View verursacht:

Wie kann ich davon loswerden?

Answer 1

Versuchen nur style unter tabBarOptions

tabBarOptions: { 
    style: { 
     height: 45 
    } 
    } 

Answer 2

Leider gibt es in dieser lib viele Layouteinstellungen fest einprogrammiert werden (wie padding: 12 für Reiter, die von anderer Stelle standardmäßig kommt).

Die einzige Option ist in node_modules \ react-navigation \ lib \ views \ TabView \ dateien zu suchen und bei Bedarf an Ihre Anforderungen anzupassen.

Im Moment hack 'ich diese Kurse, um eine schnell-n-schmutzige Möglichkeit zu finden, um rechteckige (x> y), nicht nur quadratische (x = y, wie voreingestellt) Tab-Icons zu ermöglichen.

Andere Option ist für Ihre individuelle tabBar Komponente zu erstellen, wie Maintainer