1.TouchableWithoutFeedback
https://reactnative.dev/docs/touchablewithoutfeedback
TouchableWithoutFeedback · React Native
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.
reactnative.dev
- UI 효과가 없이 터치했을 때 이벤트를 지정해 줄 수 있다.
Props
onPress : 터치가 시작되어 끝나는 시점에 호출되는 이벤트를 지정해 줄 수 있다. ( === onClick )
onPressIn : 터치가 시작되는 시점에 이벤트를 지정할 수 있다. onPress 보다 이전에 호출된다.
onPressOut : 터치가 끝나는 시점에 이벤트를 지정할 수 있다. onPress 보다 나중에 호출된다.
2.TouchableOpacity
https://reactnative.dev/docs/touchableopacity
TouchableOpacity · React Native
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.
reactnative.dev
- 컴포넌트를 터치할 때 opacity(투명도) 효과를 준다.
- TouchableWithoutFeedback 컴포넌트의 Props를 상속받는다
Props
- activeOpacity : 터치 시 투명 정도를 지정해 준다. (type number, 기본 0.2)
3.TouchableHighlight
https://reactnative.dev/docs/touchablehighlight
TouchableHighlight · React Native
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.
reactnative.dev
- 컴포넌트를 터치 할 때 하이라이트 (배경색) 효과를 준다.
- TouchableWithoutFeedback 컴포넌트의 Props를 상속받는다
- onPress(In/Out) Props가 없으면 동작하지 않는다.
Props
- underlayColor : 터치 시 나타나는 배경색을 지정해 준다.
- activeOpacity : 터치 시 나타나는 배경색의 투명 정도를 지정해 준다. (type number, 기본 0.2)
4.Pressable
https://reactnative.dev/docs/pressable
Pressable · React Native
Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
reactnative.dev
최신버전에서 새롭게 추가된 컴포넌트로 이전 Touchable 컴포넌트들의 개선된 컴포넌트로 보인다.
Props
- onLongPress : 길게 누르고 있을 때 발생하는 이벤트를 지정해 준다. (기본 500ms 누르고 있으면 동작)
- delayLongPress : onLongPress 이벤트가 발생하기 까지 걸리는 시간을 지정해 준다. (기본 500ms)
- disabled
- hitSlop : 컴포넌트 바깥 어느부분까지 터치를 감지할 것인지 지정해 준다.
이외에도 많은 Props 들이 존재하니 한 번씩 확인해 보는 것을 추천합니다.
'FrontEnd > React Native' 카테고리의 다른 글
| [react native] 스토리지 저장하기 asyncStorage (0) | 2023.02.25 |
|---|---|
| [react native] 텍스트 입력 textInput (0) | 2023.02.25 |
| [react native] 위치정보 가져오기 (expo) (0) | 2023.02.25 |
| [react native] 화면 스크롤 하기 (0) | 2023.02.24 |
| [react native] 화면 크기 가져오기 (0) | 2023.02.24 |