2017-10-12 7 views
0

나는 TabNavigator에 대해보기 흉하게 보이는 기본 탭이 있습니다. Instagram과 같이 에 스타일을 추가하려면 어떻게해야합니까?TabNavigator의 탭 스타일 방법?

enter image description here

나는 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; 
    } 

감사합니다. :)

답변

1

반응 네비게이션이 많이 다른 properties for stylingTabNavigator입니다. 아이콘을 사용하여 스타일을 지정하고 TabBar 그 (것)들을 사용할 수 있습니다.

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