결과영역과 버튼영역을 나눠보자.

일단 껍데기를 만들어보면

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Button, { ButtonTypes } from './components/Button';
import { useState } from 'react';

export default function App() {
	const isError = true;
	const [result, setResult] = useState(0);
	return (
		<View style={styles.container}>
			<View style={styles.resultContainer}>
				<Text style={styles.result}>0</Text>
			</View>
			<View style={styles.buttonContainer}>
				<Text>Button</Text>
			</View>

			<StatusBar style="auto" />
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	resultContainer: {
		flex: 1,
		backgroundColor: '#000000',
	},
	buttonContainer: {
		flex: 2,
		backgroundColor: 'skyblue',
	},
	result: {
		color: '#ffffff',
		fontSize: 60,
		fontWeight: '700',
	},
});

위와 같이 코드를 보면 resultContainer 쪽에서 결과 쪽을 보여주고 buttonContainer 쪽에서 버튼 쪽을 보여줄 것인데 이를 flex라는 속성을 주어 비율을 정해줄 수 있다.

flex

flex에 대한 설명을 하자면

일단 정적으로 잡고있는 길이를 제해주고 그다음 남은 부분에 대하여 비율을 매겨서 차지하게 해준다.

flex의 방향설정

flex의 방향을 설정할 수 있다. 쌓아나가는 것에 대하여

column : 위에서 아래로
column-reverse : 아래에서 위로
row : 왼쪽에서 오른쪽으로
row-reverse : 오른쪽에서 왼쪽으로

row에서도 비율은 마찬가지로 설정해줄 수 있다.

justifyContent & alignItems

flex-direction: column 이라면
1. justifyContent : 세로방향
2. alignItems : 가로방향

flex-direction: row 이라면
1. justifyContent : 가로방향
2. alignItems : 세로방향

한마디로
justifyContent : flexDirection과 같은 방향
alignItems : flexDirection과 수직방향

justifyContent 에서

• flex-start : 시작부터
• flex-end : 끝부터
• center : 가운데
• space-between : 사이 간격이 같게
• space-around : 주변의 공간까지 같게
• space-evenly : 주변의 공간이 고르게

alignItem

• flex-start : 위에 정렬
• flex-end : 아래 정렬
• center : 가운데 정렬
• stretch : 확장
• baseline : 기준선에 맞춤

alignself

자기 자신을 변경하고 싶을 때

statusbar 컴포넌트

expo 기본 제공 바도 있지만 react native 기본제공 바도 있다.

rn 제공

<StatusBar barStyle={'light-content'} backgroundColor={'red'} />

expo 제공

<StatusBar style={'light'} />