[React Native] 03-1 style 속성과 StyleSheet API 이해하기

스타일 객체 설정

<SafeAreaView style={{}}>

• 안쪽 중괄호 부분 : 객체를 의미한다.
• 바깥쪽 중괄호 부분 : JSX 구문에서 자바스크립트 코드를 설정할 때 쓰는 문법이다.

✅ 컴포넌트의 style 속성에는 배열을 설정할 수 있다.

<컴포넌트_이름 style={[스타일_객체1, 스타일_객체2, ...]} />

 

StyleSheet API

import {StyleSheet} from 'react-native'

스타일 객체를 style 속성에 설정하는 것 : 인라인 스타일

이 외에도 StyleSheet API를 지정해서 사용할 수 있다.

 

스타일 객체 생성하는 방법 : StyleSheet의 create 메서드 사용

const styles = StyleSheet.create({
	키_이름1: 스타일_객체1,
    키_이름2: 스타일_객체2,
    ...
})

 

인라인 스타일과 StyleSheet 스타일의 차이

인라인 스타일 방식 : 자바스크립트 엔진 스레드 ➡️ 브리지 경유 ➡️ UI 스레드 

StyleSheet.create 방식 : UI 스레드 쪽에 캐시된다. ✅ 앱 전체의 디스플레이 속도가 빨라짐m

💭 내용이 변하지 않는 스타일 (정적 스타일) ➡️ StyleSheet.create 로 구현

💭 동적으로 변하는 스타일 (동적 스타일) ➡️ 인라인 스타일 방식으로 구현

 

 

react-native-paper 패키지의 Colors 사용

import React from 'react'
import {StyleSheet, SafeAreaView, Text} from 'react-native'
import {MD2Colors} from 'react-native-paper'

console.log(MD2Colors.blue500)
export default function App() {
  return (
    <SafeAreaView style={[styles.SafeAreaView]}>
      <Text style={[styles.text]}>Hello StyleSheet world!</Text>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  SafeAreaView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: MD2Colors.blue500,
  },
  text: {fontSize: 20, color: MD2Colors.blue200},
})

그런데 나는 import {Colors} from 'react-native-paper' 라고 작성하니 패키지가 Colors 를 제공하지 않는다고 해서 비슷한  MD2Colors 를 사용했더니 정상적으로 작동했다.