StyleSheet로 컴포넌트에 스타일 입히기

컴포넌트에 StyleSheet를 사용해 스타일을 적용할 수 있다.

리액트 네이티브에서는 별도의 css 파일에 스타일을 작성하지 않고, 자바스크립트 파일 안에서 StyleSheet라는 것을 사용한다.

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

function Hello(props) {
  return (
    <View
      style={[
        styles.container,
        props.rounded && styles.rounded, // props로 받은 rounded값이 true일때 rounded 스타일 적용
        sizes[props.size], // props로 받은 size값을  적용
      ]}>
      <Text style={styles.title}>Hello World</Text>
    </View>
  );
}

Hello.defaultProps = {
  size: 'medium', // 기본 사이즈
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    borderWidth: 4,
    borderColor: 'blue',
  },
  rounded: {
    borderRadius: 30,
  },
  title: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  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 Hello;

StyleSheet는 react-native 모듈에서 불러와서 사용할 수 있다. 새로운 스타일을 선언할 때는 StyleSheet.create 함수를 사용하며, 그 안에 스타일들을 작성한다.

특정 컴포넌트에 스타일을 적용할 때는 sytle 속성을 설정하면 되고, 복수의 스타일을 적용할 때는 style={[style1, style2, ... ]} 와 같이 배열 형태로 설정하면 된다.

그리고 위에 코드에서 볼 수 있듯이 props를 활용해 동적인 스타일 적용도 가능하다.

 

 

이제 Hello 컴포넌트를 사용한 컴포넌트에서 props 값을 설정해보자.

import React from 'react';
import {SafeAreaView} from 'react-native';
import Hello from './component/Hello';

const App = () => {
  return (
    <SafeAreaView>
      <Hello rounded={true} size="large" />
    </SafeAreaView>
  );
};

export default App;

 

CSS와 StyleSheet의 차이점은 다음과 같다.

• 셀렉터라는 개념이 존재하지 않는다.
• 모든 스타일 속성은 camlCase로 작성해야 한다.
• display 속성은 기본적으로 flex이며, 다른 값은 none 밖에 없다.
• flexDirection 속성의 기본값은 웹에서 row이지만, 리엑트 네이티브에서는 column이다.
• 리엑트 네이티브에서 스타일링할 때 숫자 단위는 dp밖에 없다.
• background 대신 backgroundColor를 사용해야 한다.
• border 대신 borderWidth, borderStyle, borderColor 등을 따로 설정해야 한다.