如何设置TabNavigator的标签样式？

Question

对于TabNavigator，我有一个丑陋的默认Tabs。如何在其上添加样式如Instagram ？

我想将Tabs Navigator的背景设置为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 styling TabNavigator。您可以使用它们来设置图标的样式和TabBar本身。

示例

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