react-native 레이아웃 간단하게 잡는 방법

안녕하세요.

오늘은 react-native에서 간단하게 레이아웃 잡는 방법에 대해서 알아보도록 하겠습니다.

react native layout 잡는법

1. 고정 크기의 영역 잡기
2. 다이나믹하기 변경되는 영역 잡기 (보통 많이 사용 됨)
3. justifyContent 사용하기
4. alignItems 사용하기

1. 고정 크기의 영역 잡는 방법

# fixed dimensions

<View>
     <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
     <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
     <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>

2. 다이나믹하기 변경되는 영역 잡기 (보통 많이 사용 됨)

- 기본적으로 flex에서 flexDirection은 column이 적용 된다.

- 가로로 영역을 나누고 싶으면 flexDirection 값을 row를 사용하면 된다.

# flex dimensions

<View style={{flex: 1, flexDirection: 'column'}}>
     <View style={{flex: 1, backgroundColor: 'powderblue', flexDirection: 'row'}}>
          <View style={{flex: 1, backgroundColor: 'red'}} />
          <View style={{flex: 3, backgroundColor: 'blue'}} />
     </View>
     <View style={{flex: 2, backgroundColor: 'skyblue'}} />
     <View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>

3. justifyContent 사용하기

- 정렬 보조속성으로 flexDirection의 값에 영향을 받는다.

- flexDirection이 column일때는 수직(가로방향) 정렬을 한다.

# justifyContent

# option: flex-start, center, flex-end, space-around, space-between

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
     <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
     <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
     <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

4. alignItems 사용하기

- 정렬 보조속성으로 flexDirection의 값에 영향을 받는다.

- flexDirection이 column일때는 그 반대인 수평(세로방향) 정렬을 한다.

# alignItems

# option: flex-start, center, flex-end, and stretch. (stretch는 간격이 고정일때 사용)

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }}>
     <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
     <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
     <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

5. 기타

• Layout Props 참조, https://facebook.github.io/react-native/docs/layout-props

참조

• https://facebook.github.io/react-native/docs/flexbox

모두 수고하세요~