ppi(pixel per inch), dpi(dots per inch)
1inch에 몇 px이 들어갈 수 있는지 나타내는 밀도단위
ppi는 디스플레이에서 사용하는 단위
dpi는 인쇄물에서 사용하는 단위
dp(density-independent pixel)
리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 나타낸다
dp란 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위
dp = px * 160 / ppi
px = dp * ppi / 160
예를 들어 iPhone 11의 해상도는 1792px * 828px이고 화면밀도는 326ppi이다. 아이폰에서 200dp의 선명한 이미지를 보여주려면
px = 200 * 326 /160 => 407.5px의 너비가 나온다.
즉, 407.5px의 너비를 가진 이미지를 사용해야한다.
(이전에 과제 테스트할 때 2x,3x 이미지까지 같이 받았었는데 왜 이렇게 주는지 몰라서 그냥1x만 사용했었는데 이제야 이유를 알게됐다.)
Image 컴포넌트
- Image 컴포넌트는 source props를 사용하고 require함수를 이용해 이미지를 불러온다. 외부 이미지를 불러올때는 source에 {uri:'주소'}를 넣어주면 된다.
-
Image는 크기를 따로 설정하지 않으면 실제이미지 크기를 기반으로 dp단위의 크기로 변환되어 나타난다.
-
스타일로 이미지 크기를 조정할 때 실제이미지 크기와 값이 다르면 이미지가 리사이징 된다.. 리사이징할 때 다양한 옵션을 설정할 수 있는데, 이는 resizeMode를 통해서 가능하다.
-
cover
resizeMode를 따로 설정하지 않으면 설정되는 기본값.
이 옵션은 이미지의 가로 세로 비율을 유지한 상태로 이미지를 리사이징 한다. 이미지와 뷰의 비율이 일치하지 않는 경우 이미지의 일부분이 잘린다.
-
contain
이미지의 가로 세로 비율 유지한채로 이미지를 리사이징하며 이미지의 모든 영역이 뷰 안에 보이게한다.
-
stretch
뷰의 크기대로 이미지를 리사이징 합니다. 이 과정에서 이미지의 가로세로 비율이 원본과 달라질 수 있습니다.
-
repeat
뷰의 크기가 이미지의 크기보다 크면 바둑판식으로 이미지를 반복한다.
-
center
이미지를 뷰 중앙에 위치시킨다. contain과 마찬가지로 이미지의 모든영역이 뷰안에 보이게 한다. 단, 뷰가 이미지보다 크면 이미지의 크기가 커지지 않고 원본사이즈를 유지한다.
-
contain vs center
이 둘의 차이는 뷰의 너비와 높이가 둘다 원본 이미지 크기보다 클 때 차이가 발생한다. center는 화면 밀도에 따라 디바이스별로 다른 결과가 나타날 수 있다.
-
contain
-
center
안드로이드 배경은 기본적으로 회색
안드로이드 배경은 기본적으로 회색이기 때문에 App 컴포넌트의 block을 white로 변경해주는 것을 잊지말자
- 변경전
- 변경후
