ReactNative / Style 1 - Style

 

Style · React Native

- 위의 내용을 빌려옴 -

 

react native의 스타일은 css in js 형식으로 사용한다.

대충 말하자면 react 파일에 js코드로 css를 때려 넣겠다는 말이다.

 

근데 웹과 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;

- 위는 reactNative 공식 문서 예제 -

 

요로코롬 StyleSheet를 불러와서 create 메소드를 실행해 객체에 css를 작성하는 방식으로 한다.

각 스타일은 컴포넌트의 style로 불러오며 컴포넌트에 따라 style 적용이 불가능한 컴포넌트도 존재한다.

 

웹과 비슷해보이지만, 가장 큰 차이점은 상속이 되지 않는다는 것이다.

Text 안의 Text와 같이 상속이 될 경우도 있지만, 대부분의 경우 상속이 되지 않아

각각의 요소에 맞는 스타일링을 진행해줘야한다.

 

이상