영역에 터치할때 효과를 줄 수 잇는 컴포넌트를 정리해보겠다. 터치할 수 있는 영역을 다음 컴포넌트 중 하나로 감싸면 된다. TouchableHighlight 터치했을 때 배경색을 변경한다. 아래 사이트에서 예제를 확인할 수 있다. TouchableHighlight · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev TouchableOpacity 터치했을 때 투명도를 조정한다. activeOpacity 속성을 이용해 투명도의 정도(default 0.2)를 설정한다. TouchableOpacity..
컴포넌트
이미지 사용하기 리액트 네이티브에서 이미지를 화면에 보여줄 때는 Image라는 컴포넌트를 사용한다. 여기 circle라는 이미지가 크기 별로 3가지가 있다. circle.png 파일 하나만 있어도 컴포넌트에 불러와 사용하는데는 지장이 없지만, 화면의 밀도에 따른 다른 이미지를 보여줘야 선명도가 일정하다. 리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 설정한다. dp(density-independent pixel)란 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위이다. dp = px * 160 / ppi px = dp * ppi / 160 iPhone 11 Pro에 화면 해상도는 2436px * 1125px이고, 화면 밀도는 458ppi이다. 만약 iPhone 11 Pro에서 ..
이번엔 컴포넌트를 만들어보겠다. 파일을 만든 다음 가장 먼저 해야 할 일은 상단에 React를 불러오는 것이다. 다음으로 사용할 컴포넌트를 불러온다. import React from 'react'; import {Text, View} from 'react-native'; 그 다음 컴포넌트를 선언할 것인데, 선언하는 방법은 함수로 선언하는 방법과 클래스로 컴포넌트를 선언하는 방법 2가지가 있다. 클래스는 예전에 주로 사용하던 방법이고 주로 함수로 선언한다. import React from 'react'; import {Text, View} from 'react-native'; function hello() { return ( Hello World ); } export default hello; 함수로 선언..
