React Native - style 적용하기

React Native에서는 여러가지 방법으로 스타일을 적용할 수 있다.

 

스타일 적용 방법

inline/StyleSheet 사용 두 가지가 가능한데, 여러가지 조합으로 적용할 수 있다.

 

1. inline 으로 적용하기

style={{ backgroundColor: "black", color: "white", fontSize: 30 }}

2. StyleSheet 사용하기

style={styles.text}

3. StyleSheet 여러개 사용하기

style={[ styles.text, styles.errorText ]}

4. StyleSheet와 inline 함께 적용하기

style={[ styles.text, { color: "blue"} ]}

여러개의 StyleSheet나 StyleSheet+inline은 배열로 적용할 수 있다.

 

CSS와의 차이점

HTML/CSS에서 사용하는 것과 비슷하지만, 다른 점이 있다.

	HTML/CSS	React-Native
스타일 구분	; (세미콜론)	, (콤마)
속성명 표기법	snake-case (-)	CamelCase (대문자)
단위	px, em 등	단위생략
속성값	red, center 등 그냥 써도됨	"white" 같이 string으로 입력해야함

 

StyleSheet 사용방법

StyleSheet를 사용하기 위해서는 import해줘야 한다.

그리고 스타일들을 각각 정의해준다.

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    스타일명: { , , },
    스타일명: { , , }
});

 

동일한 내용은 제거하고, 여러개의 스타일을 사용할 수 있다.

// <Text style={[styles.text, styles.errorText]}>Error Text</Text>
 
const styles = StyleSheet.create({
  text: { 
    backgroundColor: "black",
    color: "white",
    fontSize: 30 },
  errorText: {
    // backgroundColor: "black",
    // fontSize: 30,
    color: "red"
  },
});

style.text와 style.errorText를 같이 사용하면 backgroundColor: "black", fontSize: 30, color: "red"의 Text 컴포넌트를 만들 수 있다.

 

예제

import React from "react";
import { StyleSheet, View, Text } from "react-native";
 
export default function App() {
  return (
    <View style=<styles.container}>
      <Text style={{ backgroundColor: "black", color: "white", fontSize: 30 }}>Style Code</Text>
      <Text style={styles.text}>Text</Text>
      <Text style={[ styles.text, styles.errorText ]}>Error Text</Text>
      <Text style={[ styles.text, { color: "blue"} ]}>Blue Text</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: { 
    backgroundColor: "black",
    color: "white",
    fontSize: 30 },
  errorText: {
    color: "red"
  },
});
 

위와 같이 작성한 코드는 아래와 같이 표현된다.

StyleSheet를 사용하는 경우 여러가지 장점이 있다.

• HTML의 class처럼 사용가능하다.
• 코드가 더 깔끔해지며, 적용된 스타일의 이유를 명확히 알 수 있다.
• 코드 수정도 용이해진다.

스타일 외부에서 관리하기

style.js라는 파일을 따로 만들어 스타일만 복사한다.

다른 곳에서 사용할 수 있도록 export 해야한다.

import { StyleSheet } from "react-native";
 
export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    backgroundColor: "black",
    color: "white",
    fontSize: 30,
  },
  errorText: {
    color: "red",
  },
});
 
export const orangeText = {
    color: 'orange'
};
 

사용할 곳에서 import하고 그대로 사용할 수 있다.

// 코드 생략됨
import { styles, orangeText } from "./style"
 
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ backgroundColor: "black", color: "white", fontSize: 30 }}>
        Style Code
      </Text>
      <Text style={styles.text}>Text</Text>
      <Text style={[styles.text, styles.errorText]}>Error Text</Text>
      <Text style={[styles.text, { color: "blue"} ]}>Blue Text</Text>
      <Text style={[styles.text, orangeText]}>Orange Text</Text>
    </View>
  );
}
 
// style 코드 삭제함

style코드가 없어도 정상적으로 작동하는 것을 알 수 있다.