如何设计TabNavigator的TabNavigator的Tabs？

Question

对于TabNavigator，我有一个看起来很难看的默认选项卡。我如何在上添加样式，比如Instagram？

​

​

我想将Tabs的背景设置为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导航有许多不同的造型属性 TabNavigator。您可以使用它们来样式您的图标和TabBar本身。

示例

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