[REACT NATIVE] html과는 너무 다른 react native 태그 모음집

구조

<View>

---

내용

<Text>

---

버튼

<TouchableHighlight >

버튼이 눌렸을 때 투명도가 감소하고, 손가락이 버튼 영역을 벗어나면 다시 원래대로 돌아가는 효과가 있는 버튼입니다.

속성 이름	속성 타입	설명
underlayColor	number	버튼을 눌렀을 때 배경 컬러
activeOpacity	function	버튼을 눌렀을 때 불투명도(opacity) 값. (0에서 1 사이의 값, 기본값은 0.2)

 

<TouchableOpacity>

버튼이 눌렸을 때 투명도가 감소하는 효과만 있는 버튼입니다. 손가락이 버튼 영역을 벗어나도 투명도가 원래대로 돌아가지 않습니다.

속성 이름	속성 타입	설명
activeOpacity	function	버튼을 눌렀을 때 불투명도(opacity) 값. (0에서 1 사이의 값, 기본값은 0.2)

 

<TouchableNativeFeedback>

안드로이드에서만 사용 가능한 버튼으로, 버튼이 눌렸을 때 Android Material Design에서 제공하는 Ripple 효과가 나타납니다.

속성 이름	속성 타입	설명
background	object	버튼의 백그라운드 스타일. 안드로이드에서만 동작합니다.
useForeground	boolean	버튼이 눌릴 때 호출될 함수.
delayPressIn	number	터치 피드백을 전경에 표시할지 여부를 결정합니다. 안드로이드에서만 동작합니다.
delayPressOut	number	버튼을 누르고 있을 때 호출되는 함수의 지연 시간(ms).
delayLongPress	number	버튼에서 손을 떼었을 때 호출되는 함수의 지연 시간(ms).
onLongPress	function	길게 눌렀을 때 호출되는 함수의 지연 시간(ms).
pressRetentionOffset	object	버튼을 길게 눌렀을 때 호출될 함수.

 

<TouchableWithoutFeedback>

버튼을 눌렀을 때 아무런 시각적인 효과가 없는 버튼입니다. 보통 터치 이벤트를 처리하기 위해 사용됩니다.

속성 이름	속성 타입	설명
delayLongPress	number	버튼에서 손을 떼었을 때 호출되는 함수의 지연 시간(ms).

 

<Pressable>

버튼이 눌렸을 때 일어나는 동작을 자유롭게 커스터마이징 할 수 있는 버튼입니다.

 

<Button>

가장 일반적인 버튼입니다. 타이틀과 액션을 설정하면 기본적인 버튼이 생성됩니다.

 

이러한 버튼들은 각각 다양한 속성을 가지고 있어서, 사용하는 상황에 따라 적절한 버튼을 선택하여 사용하면 됩니다. 예를 들어, Android에서 사용하는 Ripple 효과를 나타내기 위해서는 <TouchableNativeFeedback>을 사용해야 하고, 버튼이 눌렸을 때 일어나는 동작을 커스터마이징하고 싶다면 <Pressable>을 사용하면 됩니다.