9-1 Layout Direction
Layout Directiondms 계층 구조에서 자식요소와 텍스트가 배치되어야 하는 방향을 지정한다.
레이아웃의 방향은 양끝을 나타내는 start와 end를 통해 나타내는데 기본적으로 React Native는 LTR 레이아웃 방향으로 되어있다. LTR 모드에서는 start는 왼쪽 끝을 의미하고 end는 오른쪽 끝을 의미한다.
- LTR(default) : 텍스트와 자식 요소들이 왼쪽에서 오른쪽으로 배치된다. margin과 padding 속성도 왼쪽에 적용이 된다.
- RTL : 텍스트와 자식 요소들이 오른쪽에서 왼쪽으로 배치된다. margin과 padding 속성도 오른쪽에서 왼쪽으로 적용이 된다.
9-2 justifyContent
자식 컴포넌트를 부모 컴포넌트 flexDirection 속성에 맞게 정렬해주는 속성이다.
flexDirection이 column일 경우 세로를 기준으로 정렬을 해주고 row일 경우 가로를 기준으로 정렬을 해준다.
—Example(flexDiretion = column)
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<View style={styles.box1}></View>
<View style={styles.box2}></View>
<View style={styles.box3}></View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor: 'white',
flexDirection: 'column',
justifyContent: 'space-between' //space-around
},
box1: {
width: 200,
height : 200,
backgroundColor: 'powderblue',
},
box2: {
width: 200,
height: 200,
backgroundColor: 'skyblue',
},
box3: {
width: 200,
height: 200,
backgroundColor: 'steelblue',
},
});
export default App;
💡 flexDirection 속성이 column(default)인 경우
→ space-between 속성은 양끝 정렬을 하되 양끝에는 공백이 없이 정렬을 한다.
→ space-around 속성은 양끝 정렬을 하되 양끝에 공백이 포함이 되어 정렬을 한다.
—Example(flexDirection = row)
import React from 'react';
import {Text, View, StyleSheet, SafeAreaView} from 'react-native';
const App = () => {
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.box1}></View>
<View style={styles.box2}></View>
<View style={styles.box3}></View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between' //space-around
},
box1: {
width: 50,
height : 50,
backgroundColor: 'powderblue',
},
box2: {
width: 50,
height: 50,
backgroundColor: 'skyblue',
},
box3: {
width: 50,
height: 50,
backgroundColor: 'steelblue',
},
});
export default App;
💡 flexDirection 속성이 row인 경우
→ space-between 속성은 양끝 정렬을 하되 양끝에는 공백이 없이 정렬을 한다.
→ space-around 속성은 양끝 정렬을 하되 양끝에 공백이 포함이 되어 정렬을 한다.
justifyContent 속성
| 속성 | 역할 |
|---|---|
| flex-start(default) | 축의 방향대로 컴포넌트를 쌓는다. |
| flex-end | 축의 역방향대로 컴포넌트를 쌓는다. |
| center | 축의 가운데를 기준으로 쌓는다. |
| space-between | 양끝정렬(양끝 공백x) |
| space-around | 양끝정렬(양끝 공백o) |
| space-evenly | space-around인데 공백의 크기가 다 같다. |
9-3 alignItems
alignItems 속성은 justifyItems와 반대되는 축의 정렬을 도와주는 속성이다.
flexDirection이 column일 경우 가로 기준으로 정렬을 해주고 row일 경우 세로를 기준으로 정렬을 해준다.
—Example(center)
import React from 'react';
import {Text, View, StyleSheet, SafeAreaView} from 'react-native';
const App = () => {
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.box1}></View>
<View style={styles.box2}></View>
<View style={styles.box3}></View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor: 'white',
flexDirection: 'column',
alignItems: 'center'
},
box1: {
width: 100,
height : 100,
backgroundColor: 'powderblue',
},
box2: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
},
box3: {
width: 100,
height: 100,
backgroundColor: 'steelblue',
},
});
export default App;
→flexDirection을 column으로 했을때 aligmItems는 그 반대 축인 row를 기준으로 정렬을 해준다.
—Example2(stretch)
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor: 'white',
flexDirection: 'column',
alignItems: 'stretch'
},
box1: {
height: 100,
backgroundColor: 'powderblue',
},
box2: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
},
box3: {
width: 100,
height: 100,
backgroundColor: 'steelblue',
},
});
→stretch 속성은 해당 축의 크기를 지정하지 않으면 자동으로 영역 전체를 차지하게 만드는 속성이다.
→해당 코드는 flexDirection이 column이므로 box1의 width를 설정하지 않아서 자동으로 체워진 화면이다.
—Align Items
| 속성 | 용도 |
|---|---|
| strech | 설명참조 |
| flex-start | 반대축의 정렬방향대로 정렬 |
| flex-end | 반대축의 정렬 반대방향대로 정렬 |
| center | 가운데정렬 |
9-4 Align Self
부모 컴포넌트의 alignItems속성을 무시하고 싶은 자식 컴포넌트가 있을 떄 자식에게 주는 속성이다.
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor: 'white',
flexDirection: 'column',
alignItems: 'center'
},
box1: {
height: 100,
width: 100,
alignSelf: 'flex-start',
backgroundColor: 'powderblue',
},
box2: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
},
box3: {
width: 100,
height: 100,
backgroundColor: 'steelblue',
},
→ box1의 alignSelf 속성을 'flex-start'로 주어서 이 자식만 flex-start 형태로 나타난다.
—alignSelf 속성(설명 생략)
- flex-start
- flex-end
- center
- stretch
9-5 Flex Wrap
부모 컴포넌트에 주는 속성으로 자식 컴포넌트의 개수가 많아 부모 컴포넌트의 크기를 넘어가게 될 경우 주는 속성이다.
—noWrap : 크기에 상관없이 무시하고 진행한다.
-wrap : 부모컴포넌트의 크기보다 커질 경우 줄바꿈을 실시한다.
9-6 AlignContent
flexWrap속성을 wrap으로 주었을 때 어떤 식으로 정렬할지를 알려주는 속성이다.
다 이전에 말한 속성으로 설명은 생략한다.
Uploaded by Notion2Tistory v1.1.0