Eojin Han

style 속성

React Native에선 JavaScript로 스타일 지정하면 됨.

모든 core components는 style이라는 이름의 prop을 받아들임.

카멜표기법(Camel Casing)으로 이름 짓는 것 외에는 일반적으로 웹의 CSS에서 사용하던 것과 동일하다.

카멜표기법

낙타 등처럼 생겼다고 해서 붙여진 이름

단어들이 이어질 때 가독성을 위해 이어지는 단어의 시작은 대문자로 표기하는 방식

whatYourName

backgroundColor (CSS에서는 background-color 이었음)

style prop으로 자바스크립트 객체도 올 수 있는데, 예시 코드에서 일반적으로 사용하는 방식이다.

또한 스타일 배열을 전달할 수 있으며, 배열의 마지막 스타일이 우선하므로 이 옵션을 이용해 스타일을 상속할 수 있다.

Style 예시

component가 복잡해질 수록 StyleSheet.create에 여러 스타일들을 한곳에 모아놓고 사용하는 게 깔끔하다.


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

//core components들은 style이라는 이름의 prop을 받아들이며, 객체나 배열로도 전달 가능하다.
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>
    );
};

//styles : 여러 스타일 옵션들이 집합된 객체.
const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

⇒ 일반적인 패턴은 커스텀 컴포넌트를 만들 때에도 Style Prop을 받아서 스타일을 적용시키도록 만든다.

CSS에서 하듯이 캐스케이드로 적용도 가능.

text 컴포넌트 스타일 구성은 더 다양한 방법이 있다.

Text Component Reference 참고