如何设计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', 
    }, 
}