리액트 네이티브(react native)-내가 보려고 만든 레이아웃, 스타일 기타등등 사용법(1탄)

SUIN·2022년 5월 14일
0

리액트 네이티브

목록 보기
3/6
post-thumbnail

module system

자바 스크립트에서는 다른 페이지의 함수나 클래스 등을 불러오기 위한 module system을 사용한다.

export default 파일명 or export {파일명}
: 파일을 밖으로 내보낸다는 의미

Import {파일명} from <./파일경로>
: 파일을 경로에 있는 파일을 불러온다는 의미

내보낼 때, 내보낼 요소가 하나일 경우에는 전자를, 아닐 경우에는 후자를 사용한다.
전자의 경우 객체의 이름을 임의로 설정하여 내보낼 수 있으며, 후자의 경우 객체의 이름을 유지한다.


view의 크기(또는 범위)를 결정하는 속성

flex: 크기를 비율로 설정하여 사용하게 된다.

width와 height: 고정 및 상대적 크기로 설정한다.

+width와 height는 숫자일 경우에는 고정크기로, %일 경우에는 화면 크기에 따른 상대적 크기로 설정된다.
—————————————

스타일 색상 및 내용 크기 조절

backgroundColor: ‘색상코드’ = 배경 색상을 지정한다.
color: ‘색상코드’ = 색상을 지정한다. (색상 코드의 경우 rgb값 또는 색상 이름으로도 대체가 가능하다.)
fontSize: 숫자 = 글자의 크기를 지정한다.
fontWeight:’숫자’ = 글자의 두께를 지정한다.

—————————————

레이아웃의 공백 조절

Padding: 자식 컴포넌트와의 여백
margin: 부모 컴포넌트나 같은 부모 컴포넌트 안의 자식 컴포넌트 간의 여백을 지정

padding: 숫자 = 여백의 크기를 조절한다 (양옆, 위아래 모두..아마?)

marginLeft: 숫자 = 왼쪽 여백의 크기를 지정한다.
marginRight: 숫자 = 오른쪽 여백의 크기를 지정한다.
+(위, 아래도 있음)
marginVertical: 숫자 = margin의 위, 아래를 모두 지정
marginHorizontal: 숫자 = margin의 오른쪽, 왼쪽을 모두 지정

—————————————

스타일의 테두리에 대한 지정

borderTopLeftRadius:숫자 = 왼쪽 위 모서리를 둥글게 해준다.
borderTopRightRadius:숫자 = 오른쪽 위 모서리를 둥글게 해준다.
borderRadius: 숫자 = 전체적인 모서리를 지정

borderWidth: 숫자 = 테두리의 두께를 지정한다
borderBottomWidth: 숫자 = 아래 테두리의 두께만 지정한다(다른 방향도 가능)
borderBottomWidth: StyleSheet.hairlineWidth = (시스템에서 설정된 얇은 선.)

borderBottomColor: ‘색상코드’ = 테두리의 색상을 지정한다.

—————————————

정렬

textAlign:’문자’ = 텍스트 정렬 (left, right, center, justify(양쪽정렬) 4가지 가능)

flexDirection: ‘row’ = 컨테이너 내부의 아이템들이 만들어지는 방향
(row=가로로 왼쪽부터, row-reverse=가로로 오른쪽부터, column=세로로 위부터, column-reverse=세로로 아래부터)

alignItems:’center’ = 기본 축과 직교되는 위치에 대해서 설정하는 속성
flex-start = 기본 축과 직교되는 축을 중심으로 처음부터 요소들을 배치
flex-end = 맨 끝에 요소들을 배치
stretch = 요소들을 늘어뜨림
center = 가운데에 요소들을 배치

justifyContent: ‘space-between’ = 내부의 컴포넌트들의 기본 축을 중심으로 위치를 잡아준다
-flex-start = flex의 축을 중심으로 처음부터 차례대로 요소를 배치
-center = flex의 축을 중심으로 요소들을 가운데로 배치
-flex-end = flex의 축을 중심으로 요소들을 맨 끝에 배치
-space-around = 화면 모서리를 포함한 요소들 서로의 간격을 동일하게 배치
-space-between = 화면 모서리를 제외한 요소들 서로의 간격을 동일하게 배치


기타

zindex: 우선순위(누가 더 앞으로 가냐를 정해줌, 숫자가 높을수록 앞으로 옴)
textDecorationLine: ‘line-through’ = 무슨,,기능일까?


참고한 사이트

리액트 네이티브 공식 사이트? 각 스타일마다 사용해야하는 타입이 명시되어 있다.
https://reactnative.dev/docs/text-style-props

레이아웃
https://runebook.dev/ko/docs/react_native/layout-props

스타일시트
https://runebook.dev/ko/docs/react_native/stylesheet

계속해서 수정/추가될 예정

profile
공부하기싫을때붙잡고공부해봤자비명밖에안나옵니다지금제가그래요

0개의 댓글