react-native의 StyleSheet는 아래와 같이 단위 없이 표기됩니다.
tinyLogo: {
width: 50,
height: 50,
},
css에서 px
단위를 사용하던 것과는 달리, React-native StyleSheet에서는 dp(density independent pixels)
를 사용합니다. dp
는 상대적인 크기로, 휴대폰이나 태블릿의 액정 크기에 따라 다른 값을 갖게 됩니다(자세한 정보는 여기 ). 그러나 단위를 dp
로 작성했다고 해도, 찰떡같이 모든 스크린에 맞춰 개발자가 의도한 대로 척척 변해주는 것은 아닙니다.
🚫 Blocker
device에 따라 크기도 비율도 천차만별인 스크린에 맞춰 스타일을 어떻게 정의하고 그려야 할까요?
React-Native는 Dimensions라는 API를 제공합니다. 이를 통해서 screen이나 window의 넓이와 높이를 가져올 수 있고, 이것을 기준으로 %상대값을 주는 방식이 안전합니다.
컴포넌트 상단에 상수를 지정해주는 영역에서
const { width: viewportWidth, height: viewportHeight } = Dimensions.get("window")
const ITEM_WIDTH = viewportWidth * 0.3333
const ITEM_HEIGHT = viewportHeight * 0.14
와 같이 요소의 넓이와 높이를 window기준 상대값으로 지정해 줄 수 있습니다.
이후 스타일 시트에서 적용시
items: {
alignItems: "center",
justifyContent: "center",
width: ITEM_WIDTH,
height: ITEM_HEIGHT,
borderRightWidth: 1,
borderBottomWidth: 1,
borderColor: "#D1D1D1",
},
이렇게 적용 가능합니다.
Dimensions.get("screen")과 Dimensions.get("window")를 비교하다 알게 된 깨알 지식. 스크린은 기계가 띄울 수 있는 전체 화면의 크기를 의미합니다. 상태 바, 홈 터치 버튼 등의 영역을 모두 포함합니다.
반면 윈도우는 하나의 어플을 실행했을 때 차지하는 영역을 의미합니다. 일반적으로는 윈도우나 스크린은 유사한 크기를 가지고 있지만, 멀티스크린 기능 같은것을 사용한다면 차이가 발생하겠죠.
결론 : screen > window