[앱 화면 만들기] 콘텐츠 위치 - Flex

앱 화면을 구성할 때 영역의 레이아웃을 결정할 수 있는 flex에 대해 알아보자.

 

flex는 상대적이다. 가상 최상위의 container 스타일을 가져가는 View 엘리먼트는 디바이스 전체 화면의 영역을 가져가며,

안 쪽의 containerOne 스타일이 부여된 View 엘리먼트는 전체를 3등분 한 뒤 1/3을 가져가고 containerTwo는 2/3를 가져간다.

같은 레벨의 엘리먼트들의 flex 합을 각자의 flex 속성값 대로 가져간다. 

import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } from "react-native"; import favicon from "./assets/favicon.png"; export default function App() { return ( <View style={styles.container}> <View style={styles.containerOne}></View> <View style={styles.containerTwo}></View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, containerOne: { flex: 1, backgroundColor: "red", }, containerTwo: { flex: 2, backgroundColor: "yellow", }, });

 

* 예제

import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } from "react-native"; import favicon from "./assets/favicon.png"; 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, backgroundColor: "yellow", }, innerOne: { flex: 1, backgroundColor: "blue", }, innerTwo: { flex: 4, backgroundColor: "orange", }, });