[React Native] 03-2 View 컴포넌트와 CSS 박스 모델

Platform과 Dimensions API

실행 OS 확인

import {Platform{ from 'react-native'
console.log(Platform.OS)

✅ 앱이 실행되는 폰이 안드로이드폰인지 아니면 아이폰인지를 확인한다.

✅ 위의 코드를 실행하면 android 또는 ios 라고 결과가 나온다.

 

Dimension API

import {Dimension} from 'react-native'
const {width, height} = Dimensions.get('window')

✅ width, height 는 폰을 가로로 회전하더라도 변하지 않는다.

 

뷰 컴포넌트의 backgroundColor 스타일 속성

➡️ 이름에 'View' 가 들어간 뷰컴포넌트는 backgroudColor 스타일 속성으로 자신의 바탕색을 설정할 수 있다.

✅ 리액트 네이티브의 fontSize 스타일 속성에는 반드시 number타입이나 undefined를 값으로 설정해야 한다.

 

View의 기본 width값과 height값

기본 width값 : 부모 컴포넌트의 width를 그대로 설정

기본 height값 : 자식요소의 height (자식 요소가 수평으로 배치돼있다면 가장 높은 요소의 height 값을, 수직으로 배치돼있다면 자식 요소의 height 값을 모두 더한 값) 를 설정

 

const {width, height} = Dimension.get('window')

이렇게 얻은 height 값을 SafeAreaView의 height 스타일 속성에 설정하면 뷰의 높이를 폰 높이만큼 설정할 수 있다.

const styles = StyleSheet.create({
  SafeAreaView: {backgroundColor: MD2Colors.blue500, height:height}
})

✅ 여기에서 height: height 는 그냥 height 로 간결하게 구현할 수 있다. ➡️ 속성 이름과 값을 담은 변수 이름이 똑같을 때는 값을 담은 변수 부분을 생략할 수 있다.

 

부모 요소의 크기를 기준으로 퍼센트를 설정하는 방법

➡️ CSS에서 퍼센트(%) 값은 항상 부모 컴포넌트의 크기를 기준으로 한다.

 

flex 스타일 속성

➡️ flex: 1 == height: 100% / flex: 0.5 == height: 50%

✅ flex와 width 혹은 height 스타일 속성을 함께 사용할 경우에는 width와 height의 적용 우선순위가 flex 보다 높다.

(자세한건 나중 챕터에서 다룬다고 함.)

 

margin 스타일 속성

➡️ 부모/자식 간 혹은 이웃한 형제 요소 간의 간격을 조정한다.

➡️ 속성: marginLeft, marginRight, marginTop, marginBottom

✅ marginLeft 값 = marginRight 값 ➡️ marginHorizontal 스타일 속성으로 동시에 설정 가능

✅ marginTop 값 = marginBottom 값 ➡️ marginVertical 스타일 속성으로 동시에 설정 가능

✅ marginRight 값 = marginBottom 값 ➡️ margin 스타일 속성으로 동시에 설정 가능

 

padding 스타일 속성

margin 과 똑같음 but, padding 속성은 부모 컴포넌트 쪽에 적용하는 스타일로 자식 컴포넌트가 자신의 영역을 꽉 채우지 않게 하기 위해 사용한다.

 

border 관련 스타일 속성

➡️ 리액트 네이티브 코어 컴포넌트는 대부분 자신 영역의 경계(border)를 설정할 수 있다.

 

 

★중요한 점★

iOS 에서 SafeAreaView는 View 가 아니다!!!!

➡️ iOS 에서만 적용이 되지 않는 스타일 속성이 있을 수 있다.

 

해결법 Platform.select 메서드 사용

OS에 따른 설정

paddingLeft: Platform.select({ios: 0, android: 20})

✅ Platform.OS 가 ios일 때의 값과 Platform.OS 가 android일 때의 값을 각각 설정한다.