如何設計TabNavigator的選項卡？

Question

我有這樣一個看起來很醜陋的TabNavigator默認選項卡。我如何添加樣式像Instagram？

我想設置的選項卡導航的背景white（不是灰色），並設置邊框與線之上。另外，我想將活動圖標顏色設置爲黑色。 （只是像INSTAGRAM ..！）

我不知道我可以把這些樣式放在我的TabNavigator。

export default TabNavigator(
    { 
    Feed: { 
     screen: FeedStackNavigator, 
    }, 
    ... 
    }, 
    { 
    navigationOptions: ({ navigation }) => ({ 
     header: null, 
     tabBarIcon: ({ focused }) => { 
      const { routeName } = navigation.state; 
      let iconName; 
      switch (routeName) { 
       case 'Feed': 
        iconName = Platform.OS === 'ios' 
        ? `ios-information-circle${focused ? '' : '-outline'}` 
       : 'md-list-box'; 
      break; 
    } 

謝謝！ :)

Answer 1

react-navigation有很多不同的properties for stylingTabNavigator。您可以使用它們來設計您的圖標和TabBar本身。

例

tabBarOptions: { 
    activeTintColor: '#e91e63', 
    labelStyle: { 
    fontSize: 12, 
    }, 
    style: { 
    backgroundColor: 'blue', 
    }, 
}