[ReactNative - flex] 앱 기능별 공간 크기 조정

크기를 조정할 때 숫자로 크기를 주면 기기의 크기, 비율에 따라 보이는 모습이 달라진다. 이때 flex를 이용하면 비율로 설정이 되기 때문에 기기의 크기에 맞춰 자연스럽게 구성된다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import React from 'react';

export default function App() {
	return (
		<View style={styles.YellowView}/>
		<View style={styles.BlueView}/>
	);
}

const styles = StyleSheet.create({
	YellowView: {
		flex: 1,
		backgroundColor: 'yellow'
	},
	BlueView: {
		flex: 1,
		backgroundColor: 'blue'
	}
});

▲ 노란색와 파란색이 각각 1/2을 차지하게 된다.

 

사용된 flex의 총 합을 분모로 보고, 해당하는 flex의 수를 분자로 보면 해당 flex가 차지하는 비율을 알 수 있다. 예를 들어 위의 코드에서 BlueView의 flex를 2로 바꾼다면 파란색이 차지하는 비율은 화면의 2/3인 것이다.