[REACT NATIVE] StyleSheet

1. 리액트 네이티브에서는 별도의 CSS 파일에 스타일 지정 X

    자바스크립트 파일 안에서 StyleSheet 사용

 

2. CSS와의 차이점

- 모든 스타일 속성: camelCase

- display 기본 속성: flex / 다른 값은 none뿐!

- flexDirection 속성의 기본값: 웹- row, 리액트 네이티브- column

- 스타일링 시 숫자 단위는 dp뿐

- background 대신 backgroundColor 사용

- border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정

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

function Box({rounded, size, color}) {
  return (
    <View
      style={[
        styles.box,
        rounded && styles.rounded,
        sizes[size],
        {
          backgroundColor: color,
        },
      ]}
    />
  );
}

Box.defaultProps = {
  size: 'medium',
  color: 'black',
};

const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  },
  rounded: {
    borderRadius: 16,
  },
  small: {
    width: 32,
    height: 32,
  },
  medium: {
    width: 64,
    height: 64,
  },
  large: {
    width: 128,
    height: 128,
  },
});

const sizes = {
  small: styles.small,
  medium: styles.medium,
  large: styles.large,
};

export default Box;