본문 바로가기
모바일 APP/React-Native

터처블 코어 컴포넌트 (Touchable)

by 살길바라냐 2021. 9. 13.
반응형

특징

1. 컴포넌트 영역 터치시 OnPress 이벤트 속성에 설정된 콜백 함수를 호출한다.

2. 단 한개 자식 컴포넌트만 온다.

 

Button, TouchableOpacity, TouchableHiglight 차이

Button : 커스텀에 제약 사항이 많고 일부 안드로이드 낮은 버전에서는
디자인 적용 안되는 경우도 있음.

TouchableOpacity : 컴포넌트 바탕색 투명도 변화가 생김 
모든 플랫폼 디자인에 이상 없이 동작

TouchableHiglight: 컴포넌트 바탕색 잠깐 바뀜

return(

<SafeAreaView>

// button
<Button title="btn" onPress={}/>

// touchahbleOpacity

<TouchableOpacity  onPress={}>
 <Text>TouchableOpacity</Text>
</TouchableOpacity>

// touchahbleHighlight
<TouchableHighlight  onPress={}>
 <Text>TouchableHighlight</Text>
</TouchableHighlight>

</SafeAreaView>
)

 

모두 OnPress 이벤트 속성을 가지고 있음

 

번외로 Text 컴포넌트도 OnPress 이벤트 속성을 가지고 있음
다만 터치시 아무런 변화가 없다는게 Button, TouchableOpacity, TouchableHiglight 
다르다

 

return(

<SafeAreaView>

// button
<Text onPress={}>text</Text>
</SafeAreaView>
)
728x90