그리운 테헤란로 427 10층
RN 개발 하다가 onPress를 했을 떄 스타일링을 해야하는 작업을 하던 도중 큰 난관은 아니지만
어.. 이러면 안되는데... 라는 벽에 맞았다.
어떤 경우였냐면 해당 요소를 클릭 했을 때 반짝! 이는 효과가 나오면 안되는데 계속 나오는 현상을 발견했다.
그래서 구글링을 해본 결과 styled-component를 작성하면서 사용 방법도 모르고
이거면 되겠지! 라는 안일한 마음으로 작성한 코드가 눈에 띄었다.
🧐 내가 겪은 문제
const StatisticsButton = styled.TouchableOpacity``;일단 이 부분이다.
터치할 때 default값으로 0.2 opacity가 들어가 있다.
(css를 한 사람이면 opacity 0.2가 어떤 걸 의미하는 지 알 수 있을 것이다.)
그래서 계속 반짝이는 문제가 있었고 이를 해결 하기 위해선 두가지 방법이 있다.
(onPress 함수에 터치할 때 사용되는 기능들은 조금 더 뒤에서 정리해보자.)
😎 해결
activeOpacity
activeOpacity를 사용해서 default opacity 0.2를 1로 바꿔주면 반짝이지 않는다.
TouchableWithoutFeedback
TouchableWithoutFeedback의 default 기능인 터치 했을 때 아무런 효과를 나타내지 않는 기능을 사용하면 된다.
👀 정리
TouchableOpacity
TouchableOpacity는 말그대로 터치했을 때 투명도를 조정한다. activeOpacity 속성을 이용해서 투명도의 정도(default 0.2)를 설정할 수 있다.
공식문서 TouchableOpacity 예제
TouchableWithoutFeedback
터치했을 때 아무 효과도 적용하지 않는다.
공식문서 TouchableWithoutFeedback 예제
TouchableNativeFeedback
터치했을 때 물결효과를 준다. 이 컴포넌트는 안드로이드에서만 사용 가능하기 때문에
IOS에서 사용하면 오류가 난다. 그러니 혹시라도 사용을 하게 된다면 조건부 렌더링을 조심스레 걸어주자.
공식문서 Touchablenativefeedback 예제
TouchableHighlight
터치했을 때 배경색을 변경한다. underLayColor로 터치가 활성화 될 때 언더 레이의 색상을 지정할수도 있다.
공식문서 TouchableHighlight 예제
