4장. 스타일링

[처음 배우는 리액트 네이티브] 책을 공부하면서 정리한 내용입니다.

인라인 스타일링

: 컴포넌트에 직접 스타일을 입력하는 방식. 객체 형태로 전달
ex.

<View
	style={{
    	flex: 1,
        backgroundColar: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
		}}
   >

클래스 스타일링
: 스타일시트에 정의된 스타일을 사용
ex.

<View style={styles.container}>
 ...
</View>
...
const styles = StyleSheet.create({
	container: {
    	flex: 1,
        backgroundColar: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
  });

여러개의 스타일을 적용하고 싶을 땐, 배열을 사용.

스타일 요소

flex

: width나 height와 달리 항상 비율로 크기 결정. 값으로 숫자를 받으며 값이 0일 때는 설정된 width와 height 값에 따라, 양수인 경우 flex 값에 비례하여 크기 조정.

flexDirection

: 자식 컴포넌트가 쌓이는 방향 설정.
coumn - 세로방향, row - 가로 방향, (-reverse은 역순)

justifyContent

: 컴포넌트를 정렬할 방식 설정. flexDirection과 동일한 방향.
flex-start - 시작점에서부터 정령
flex-end - 끝에섯부터 정렬
center - 중앙 정렬
space-between - 컴포넌트 사이의 공간을 동일하게 만들어서 정렬
space-around - 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬
space-evenly - 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬

alignItems

: 컴포넌트를 정렬할 방식 설정. flexDirection과 수직인 방향.
flex-start - 시작점에서부터 정렬
flex-end - 끝에서부터 정렬
center - 중앙 정렬
stretch - alignItems의 방향으로 컴포넌트 확장
baseline - 컴포넌트 내부의 텍스트 베이스라인을 기준으로 정렬

그림자

shadowColor : 그림자 색 설정
shadowOffset : width와 height값을 지정하여 그림자 거리 설정
shadowOpacity : 그림자의 불투명도 설정
shadowRadius : 그림자의 흐림 반경 설정
-> 하지만 ios에서만 적용 가능.

플랫폼마다 적용 여부가 다른 속성들을 위해 Platform 모듈 이용.

css와 유사하기 때문에 더욱 혼란스러울 수 있다. 이를 방지하기 위해 스타일드 컴포넌트 활용 추천. (설치)

스타일드 컴포넌트

: 자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리. 스타일이 적용된 컴포넌트

설치방법

npm install styled-components

ex.

import styled from 'styled-components/native';

const MyTextComponent = styled.Text`
	color: #fff;
`;

재사용시 css 사용.
ex.

import styled, { css } from 'styled-components/native';

const whiteText = css`
	color : #fff;
    font-size: 14px;
`;
const MyBoldTextComponent = styled.Text`
	${whiteText}
	font-weight: 600;
`;

const ErrorText = styled(whiteText)`
	font-weight: 600;
    color: red;
`;

이미 작성된 스타일을 상속받아 새로운 스타일드 컴포넌트를 만들 때는 styled(컴포넌트이름)으로 표기.

porps, attrs를 사용하여 스타일 관리 가능

ThemeProvider