웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > reactnative

react native에서 View 컴포넌트에 onPress 클릭 안되는 현상

Last Modified : 2020-05-30 / Created : 2018-08-08
11,272
View Count
앱을 개발할 수 있는 React Native의 <View> 컴포넌트에서 클릭을 사용하기 위해서 onPress={}를 사용하여 이벤트를 추가였으나 동작하지 않는 문제가 발생하였습니다.




! onPress가 View에서 동작하지 않는 경우


먼저 원인은 무엇일까요? 이유는 View 컴포넌트는 onPress를 지원하지 않기 때문입니다... 즉 여기서 사용된 <View>는 스타일을 지원하기 위한 목적의 컴포넌트로 onPress 등의 클릭이 필요한 경우 다른 컴포넌트 요소를 사용해야만 했습니다.

결국 View가 아닌 다른 방법을 찾아야하는데 대체 방법으로 <TouchableOpacity> 또는 <Button>을이 가장 좋은 해결방법입니다. 즉 기존 코드를 수정하여 적용하면 아래와 같이 나타나겠습니다.

@ 변경 전
<View onPress={ () => { Alert.alert('Hi') }}>
Click
</View >

@ 변경 후
<TouchableOpacity onPress={ () => { Alert.alert('Hi') }}>
  Click
</TouchableOpacity>

이처럼 View 컴포넌트는 클릭, onPress 동작이 안되니 다른 컴포넌트를 사용하세요.