React-Native: 컴포넌트 => View, Text / RN Style CSS 동작방식

React-Native 컴포넌트

 

  <View>는 <div>와 같음

flex: 사용하여 레이아웃짠다.

-> 브라더끼리는 숫자로 경쟁하고, 숫자 큰 애가 더 큰 뷰를 차지함

 

 

 

RN Style 

 

리액트 네이티브에만 있는 CSS가 있음.

 

Style

- RN의 대부분의 스타일은 웹 CSS 동작과 일치함

- 다만, id, class등의 선택자로 스타일 지정하는 것이 아님

- StyleSheet.create메소드를 이용해 스타일 object를 작성하여 컴포넌트에 style props를 전달함

 

기본문법

- CSS 문법은 key, value를 가지는 object 형태

 

 

기존의 CSS와 RN 스타일과의 차이점

 

id, class 등의 선택자 사용 안함

; 사용 대신 , 사용 

. 사용하지 않고 : 사용

.red {...} //기존

red:{...} //RN


.blue { //기존
	color: blue;
    font-size: 30pt;
}

blue: { //RN
	color: blue,
    font-size: 30pt,
},

 

 

스타일의 속성명은 하이픈 사용하지 않고 CamelCase 사용

.content { //기존 CSS
	background-color: #eee;
}


content: { // RN
	backgoundColor: '#eee',
}

 

 

RN에서는 fontSize: 30, margin: 20 처럼 px, em등의 단위 생략함

=> 적용되는 단위에는 ios에서는 논리 픽셀, 안드로이드에서는 pt와 유사한 DIP사용

 

 

margin이나 padding의 축약형 대신 상하, 좌우 값을 한 번에 적용시킬 수 있는 속성이 존재

 

flexGrow

flexShrink

flexBasis

marginVertical

marginBottom

paddingVertical

등

 

 

 

 

HTML/CSS과 스타일 우선순위가 다름

 

기존

- html에 선언된 순서 class="red bigTex"와 상관없이 color값은 CSS에서 선언한 우선순위 규칙에 따라 나중에 선언된 값이 적용됨

 

RN

- 여라개의 스타일을 전달할 때 배열을 이용

render() {
return (
    <Text style={[styles.red, styles.bigText]}>red, then bitText</Text>
);
}

 

- style 에서 선언된 순서와 상관 X

- 나중에 호출된 스타일이 덮어 씌우는 방식임

 

 

React-Native 스타일 컴포넌트

 

- Text 컴포넌트는 중첩해서 사용가능 => 자식 text 컴포넌트가 부모 text 컴포넌트 스타일 상속받음

텍스트 하이라이팅 처리할 떄 주로 사용함

- 중첩된 inline-level 처럼 동작하는데, margin, padding, border 등 box-model 관련된 스타일이 적용되지 않는다.

 

 

Touchable

 

Button: 기본 버튼 컴포넌트, styles props를 이용해 스타일링할 수 없어서 UI 개발시 활용도 떨어짐

주요 props, ios의 경우 버튼 text color / 안드의 경우 버튼 background color 변경

 

TouchableHightlight:

- 터치시 하이라이트가 발생함

- 내부에 반드시 하나의 자식 컴포넌트를 삽입해야함

- 여러개가 필요하면 View나 <></>로 그룹화 필요

- 주요 props => UnderlayColor: 터치시 하이라이팅되는 색상 지정

 

TouchableOpacity:

- 터치시 opacity 값 적용됨 /  다른 Touchable 컴포넌트와 다르게 자식요소가 올 수 있음

- 주요 props: activeOpacity 값

 

 

Image

html img태그처럼 이미지 표햔할 때 사용하는 컴포넌트

- 앱 내부 이미지파일: require로 불러오고 width, height 를 설정하지 않으면 원본사이즈 대로 렌더링됨

- 네트워크 이미지나 url 이미지를 사용할 떄는 image의 width height 안넣으면 안불러와짐

 

출처: 노마드코더, WIT블로그

 

React Native UI 개발 시작하기 | WIT블로그