Style 지정하기

이번에는 React Native의 공식 문서를 공부하면서 공부한 내용을 적어두고자 합니다.

React Native에서 Style을 지정할 때는 StyleSheet을 이용합니다.

기본적인 사용법은 컴포넌트에 style props에 StyleSheet 값을 넘겨주면서 Style을 지정하는 방식입니다.

이때 Style의 속성 이름은 css에서 단어와 단어 사이에 하이폰(-)을 입력하는 것과 다르게 뒤에 있는 단어의 첫 글자를 대문자로 사용해 스타일 속성 이름을 지정할 수 있습니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.red}>just red</Text>
            <Text style={styles.bigBlue}>just bigBlue</Text>
            <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
            <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        marginTop: 50,
    },
    bigBlue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
    },
    red: {
        color: 'red',
    },
});

export default LotsOfStyles;

컴포넌트의 높이와 너비 지정하기

컴포넌트의 높이와 너비를 지정하기 위한 방법은 대표적으로 3가지가 있습니다. 고정된 치수를 입력하거나, 플렉스를 이용하거나, 퍼센트 값을 이용하는 방법입니다.

고정된 치수를 입력하면 해당 값만큼의 픽셀의 크기로 컴포넌트를 배치합니다. 플랙스를 이용하면 일반적으로 사용 가능한 모든 공간을 채웁니다. 이때 flex의 값이 클수록 형제 컴포넌트에 비해 flex의 비율만큼 공간 비율이 달라집니다. 퍼센트 값을 이용하면 일반적으로 사용 가능한 모든 공간에서 해당 비율만큼을 채워 배치합니다.

// 고정된 치수 입력
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
// 플랙스
<View style={{ flex: 1, backgroundColor: 'powderblue' }} />
// 퍼센트
<View style={{ height: '15%', backgroundColor: 'powderblue'}} />