React Native Tutorial 따라하기 – Style

CSS를 사용하듯이 React Native에서도 유사하게 Style을 지정하는 것이 가능하다. 대부분의 style name이 CSS와 유사하다. 다만, CSS에서는 style name을 background-color와 같이 표현하면, React Native는 backgroundColor와 같이 표현한다. 다음은 Style 적용 예제다.

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

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

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <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>
    );
  }
}

위 예제는 각각 하나의 Style이 적용되었을 때와 Style이 복수로 적용되는 경우 순서에 따라 다르게 표현되는 것을 보여준다.