flexDiretion / justifyContent / alignItems

flexDiretion은 자리 잡은 영역의 방향이다. 예제를 보면 바로 이해가 간다.

 

* 예제

import { StatusBar } from "expo-status-bar";

import React from "react";

import {

ScrollView,

StyleSheet,

Text,

View,

Button,

Alert,

TouchableOpacity,

} from "react-native";

 

export default function App() {

return (

<View style={styles.container}>

<View style={styles.containerOne}></View>

<View style={styles.containerTwo}>

<View style={styles.innerOne}></View>

<View style={styles.innerTwo}></View>

</View>

</View>

);

}

 

const styles = StyleSheet.create({

container: {

flex: 1,

},

containerOne: {

flex: 1,

backgroundColor: "red",

},

containerTwo: {

flex: 2,

flexDirection: "row",

backgroundColor: "yellow",

},

innerOne: {

flex: 1,

backgroundColor: "blue",

},

innerTwo: {

flex: 4,

backgroundColor: "orange",

},

});

flexDirection에서 row는 가로방향, column은 세로방향으로 영역을 배치한다. 기본값은 column

 

* flexDirection: "row" 적용 전 

* flexDirection: "row"  적용 후

 

justifyContent 는 flexDirection과 동일한 방향으로 정렬하는 속성

아래 그림을 보면은 각 속성이 어떻게 동작하는지 쉽게 이해가 갈것이다! 

* 예제

import { StatusBar } from "expo-status-bar";

import React from "react";

import {

ScrollView,

StyleSheet,

Text,

View,

Button,

Alert,

TouchableOpacity,

} from "react-native";

 

export default function App() {

return (

<View style={styles.container}>

<View style={styles.containerOne}></View>

<View style={styles.containerTwo}>

<View style={styles.innerOne}></View>

<View style={styles.innerTwo}>

<Text>justifyContent 테스트</Text>

</View>

</View>

</View>

);

}

 

const styles = StyleSheet.create({

container: {

flex: 1,

},

containerOne: {

flex: 1,

backgroundColor: "red",

},

containerTwo: {

flex: 2,

flexDirection: "row",

backgroundColor: "yellow",

},

innerOne: {

flex: 1,

backgroundColor: "blue",

},

innerTwo: {

flex: 4,

justifyContent: "center",

backgroundColor: "orange",

},

});

 

아래 결과와 같이 텍스트가 배치되는것을 볼 수 있다.

 

alignItems 은 flexDirection과 반대방향으로 정렬한다고 보면된다.

* 예제

import { StatusBar } from "expo-status-bar";

import React from "react";

import {

ScrollView,

StyleSheet,

Text,

View,

Button,

Alert,

TouchableOpacity,

} from "react-native";

 

export default function App() {

return (

<View style={styles.container}>

<View style={styles.containerOne}></View>

<View style={styles.containerTwo}>

<View style={styles.innerOne}></View>

<View style={styles.innerTwo}>

<View style={styles.content}></View>

</View>

</View>

</View>

);

}

 

const styles = StyleSheet.create({

container: {

flex: 1,

},

containerOne: {

flex: 1,

backgroundColor: "red",

},

containerTwo: {

flex: 2,

flexDirection: "row",

backgroundColor: "yellow",

},

innerOne: {

flex: 1,

backgroundColor: "blue",

},

innerTwo: {

flex: 4,

backgroundColor: "orange",

alignItems: "flex-end",

},

content: {

width: 50,

height: 50,

backgroundColor: "#000",

},

});

 

아래와같이 결과만 잘 나오는걸 볼 수 있다.

 

코드에서 보는것과 같이 상위 엘리먼트(innerTwo)에 적용해야 안에 있는 컨텐츠에 영향이 간다라는점 을 잊지 말자.