【React Native】Expo로 탭 focus시의 텍스트 칼라를 바꾸는 방법

Expo를 사용해 React Native의 공부를 시작했습니다만, 어쩐지부터 집착했기 때문에 각서입니다.

탭 선택시 초기 상태

우선은 디폴트의 상태가 이쪽.


↑선택하고 있는 탭 「Home」의 아이콘, 텍스트 칼라가 파랑입니다.

이것을 다른 색으로 바꿉니다.

탭 선택시 (focus)의 텍스트 색상 변경

/navigation/MainTabNavigator.js를 편집합니다.

MainTabNavigator.js 편집 전

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

↑의 부분을↓

MainTabNavigator.js 편집 후

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
},{
  tabBarOptions: { activeTintColor:'red'}, // 追加箇所
});
};

로 변경합니다.
tabBarOptions: { activeTintColor:'red'},
를 추가했습니다. red 곳에 원하는 색상을 넣어주세요.

그러면…



↑선택시(focus)시의 색이 바뀌었습니다!

덤：아이콘의 색도 바꾼다

constants/Colors.js

const tintColor = '#2f95dc';

↑ 「#2f95dc」를 바꾸면

constants/Colors.js

tabIconSelected: tintColor,

색상이 들어가기 때문에

파란색 아이콘이 분홍색이 되었습니다! !

참고 : htps : // 기주 b. 코 m / Rea ct-na-ga Chion / Rea ct-na-ga Chion / Issue s / 1781