[RN] React Navigation TopTab 꾸미기

http://devhooney.tistory.com/84

[RN] React Navigation TopTab 추가

 

이 포스팅과 이어지는데,

 

 <>
  <View style={styles.container} />
  <TopTap.Navigator
    screenOptions={{
      tabBarActiveTintColor: 'red',
      tabBarInactiveTintColor: 'blue',
      tabBarPressColor: 'red',
      tabBarIndicatorStyle: {
        borderBottomColor: 'red',
        borderBottomWidth: 2,
      },
    }}>
    <TopTap.Screen name="tab1" component={tab1} />
    <TopTap.Screen name="tab2" component={tab2} />
  </TopTap.Navigator>
</>

 

tabBarActiveTintColor: 'red'는 선택한 탭일 경우의 글자 색을 변경한다.

tabBarInactiveTintColor: 'blue'는 선택 안한 탭일 경우의 글자 색을 변경한다.
tabBarPressColor: 'red'는 선택하려고 터치 했을 경우 글자 색을 변경한다.
tabBarIndicatorStyle: 의 borderBottomColor: 'red'는 선택한 탭일 경우 선택했음을 알려주는 표시의 색을 변경한다.
borderBottomWidth: 2는 선택했음을 알려주는 표시의 두께를 변경한다.

 

 한동안 RN을 잘 못했는데, 이제부터라도 조금씩 조금씩 하려고 한다.