[React-Native] 리액트 네이티브 터치, 클릭 (Button, TouchableHighlight)

리액트 네이티브는 터치에 반응하는 인터페이스를 만들 수 있도록 여러 API를 제공해 줍니다.

 

그 중 <Button>, <TouchableHighlight> 두가지 컨테이너 컴포넌트를 한번 알아봅시다

 

1. <Button>

가장 기본적인 방법으로 상호작용하는 버튼을 만들고 싶을때 사용합니다.

<Button
	onPress={this._onPress},
    title="Test Press",
    color="#fcfcfc",
/>

위와 같이 기본적인 버튼을 사용할 수 있습니다.

 

2. <TouchableHighlight>

뷰가 터치될 때 오버레이를 추가하여 사용자에게 시각적인 효과를 부여합니다. 이러한 효과는 웹이 아닌 네이티브앱처럼 느껴지도록 합니다

 

사용법 또한 간단하게 사용할 수 있습니다.

<TouchableHighlight
 onPressIn={this._PressIn}      // 사용자가 탭을 하고 있을때 호출합니다.
 onPressOut={this._PressOut}    // 사용자가 탭을 하고 있다가 떼었을경우 호출합니다.
>
 <View>
  <Text>사용자 탭 테스트</Text>
 </View>
</TouchableHighlight>

위와 같이 감싸주면 사용이 가능합니다.

 

탭을 하고 있을때와 탭한 것을 떼었을때의 경우 를 따로 확인이 가능합니다.

 

이렇게 간단히 알아보았는데요

 

궁금하신 부분이나 도움이 필요하신부분은 댓글로 남겨주세요!