TabNavigator額外填充

如何設計TabNavigator選項卡的高度和填充的樣式？ Im做以下幾點：TabNavigator額外填充

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

如何擺脫圖標和標籤之間填充的？我做了padding:0iconStyle和tabStyle但沒有運氣。我也不想在label以下填充。我怎麼做？謝謝。

發現的微胖由View造成的：

我如何擺脫呢？

來源

2017-10-18 Somename

儘量只style下tabBarOptions

tabBarOptions: { 
    style: { 
     height: 45 
    } 
    }

來源

2017-10-20 15:11:29

這降低了高度，移位的TabBar底部。現在切斷了標籤欄。額外的填充仍然存在。我也試過：'paddingHorizontal：0，paddingVertical：0'但是不起作用。 – Somename

不幸的是大量的版面設置在這個LIB是硬編碼（如填充：對於其配備的缺省從別處卡12）。

唯一的選擇是查看node_modules \ react-navigation \ lib \ views \ TabView \文件並根據需要進行調整以滿足您的要求。

現在我正在黑客們找到一個快速n-dirty的方法來允許矩形（x> y），不僅是方形（x = y，如默認）選項卡圖標。

另一種選擇是創建自定義TabBar組件的維護者建議

來源

2017-12-19 16:06:13

TabNavigator額外填充

回答

相關問題