如何设置 TabNavigator 的标签样式？

Question

我的 TabNavigator 默认选项卡看起来很丑。如何在上面添加样式 就像 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',
  },
}

如何设置 TabNavigator 的标签样式？

How to style TabNavigator's Tabs?

reactjs

react-native

react-navigation

expo