Props
- onPress: 사용자가 View를 탭할 때 실행할 함수를 정의한다
- onLongPress: 사용자가 View를 오랫동안 탭할 때 실행할 함수를 정의한다
- onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: 터치 이벤트에 대한 함수를 정의하여, 사용자가 View를 터치하는 동안 발생하는 이벤트를 처리할 수 있다
- onLayout: View의 레이아웃이 변경될 때 실행할 함수를 정의합니다. 이를 통해 사용자에게 뷰의 크기나 위치에 대한 정보를 제공할 수 있다
- onScroll: 스크롤 이벤트에 대한 함수를 정의하여, 사용자가 View를 스크롤할 때 발생하는 이벤트를 처리할 수 있다
- onContentSizeChange: 스크롤 가능한 내용의 크기가 변경될 때 실행할 함수를 정의한다
- 이 외에도 React Native의 View 컴포넌트는 onStartShouldSetResponder, onMoveShouldSetResponder, onResponderGrant, onResponderMove, onResponderRelease, onResponderTerminate 등 다양한 터치 이벤트 관련 props를 제공한다. 이러한 이벤트 처리 props를 활용하여 사용자와의 상호작용을 지원할 수 있다
Button
- 기본적인 버튼 컴포넌트이다
- style props를 이용해 스타일링을 할 수 없기 때문에 UI개발시 활용도가 떨어진다
- 주요 props
color: ios의 경우 버튼 텍스트 color, 안드로이드의 경우 버튼 배경색이 변경된다
TouchableHightlight
- 터치시 하이라이트가 발생한다
- 내부에 반드시 하나의 자식 컴포넌트를 삽입해야 한다
- 여러개의 컴포넌트가 필요하다면 View나 flagment(<></>)를 이용해 그룹화해야한다.
- 주요 props
underlayColor: 터치시 하이라이팅되는 색상을 지정한다
TouchableOpacity
- 터치시 opacity값이 적용된다
- 다른 Touchable 컴포넌트와 달리 여러개의 자식요소가 올 수 있다
- 주요 props
activeOpacity: 터치시 적용되는 opacity값을 설정한다(0~1)
네트워크 이미지 호출 방식
source={{uri:'https://hello.com/logo.png'}}
내부 이미지 호출 방식
source={require('~/images/icon.png')}
data URI 이미지 호출 방식
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEX...'}}