2017-10-12 14 views
0

私はTabNavigator用のこのような醜い見た目のタブを持っています。 Instagramのように、それにスタイルを追加するにはどうすればいいですか?TabNavigatorのタブをスタイルするにはどうすればいいですか?

enter image description here

私はwhite(灰色ではない)として、タブナビゲータの背景を設定し、ラインとの国境のトップを設定したいです。さらに、アクティブなアイコンの色を黒色に設定したいと思います。 (ちょっと入れ墨のような..!)

私はこれらのスタイルを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; 
    } 

ありがとうございます! :)

答えて

1

反応ナビにはたくさんの異なるものがありますproperties for stylingTabNavigator。それらを使用してアイコンとTabBarをスタイルすることができます。

tabBarOptions: { 
    activeTintColor: '#e91e63', 
    labelStyle: { 
    fontSize: 12, 
    }, 
    style: { 
    backgroundColor: 'blue', 
    }, 
} 
関連する問題