1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 스타일[Style]

스타일[Style]

React Native를 사용하면 스타일을 정의할 때 특별한 언어나 구문을 사용하지 않아도 됩니다. 자바스크립트를 사용하여 앱의 스타일을 정의할 수 있습니다. 모든 핵심 컴포넌트에는 스타일(Style)이라는 prop이 적용됩니다. 스타일 이름과 값은 일반적으로 CSS가 웹에서 작동하는 방식과 일치합니다. 단, 이름은 캐멀 케이스(camel casing)를 사용하여 작성됩니다 (예: background-color가 아닌 backgroundColor).

style prop은 일반 자바스크립트 객체일 수 있습니다. 그것은 가장 단순하며 우리가 일반적으로 예제 코드에 사용하는 것입니다. 스타일 배열을 전달할 수도 있습니다. 배열의 마지막 스타일이 우선 순위를 가지므로 이 스타일을 사용하여 스타일을 상속할 수 있습니다.

컴포넌트가 복잡해짐에 따라 StyleSheet.create를 사용하여 여러 스타일을 한 곳에서 정의하는 것이 더 깔끔합니다. 다음은 그 예입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <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({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

한 가지 공통적인 패턴은 컴포넌트가 하위 컴포넌트의 스타일을 지정하는 스타일 prop을 허용하도록 하는 것입니다. 이것을 사용하여 CSS에서 스타일을 “계단식[cascade]”으로 만들 수 있습니다.

텍스트 스타일을 사용자 정의하는 데는 여러 가지 방법이 있습니다. 전체 목록은 텍스트 컴포넌트 레퍼런스를 확인하십시오.

이제 텍스트를 아름답게 만들 수 있습니다. 스타일 마스터가 되는 다음 단계는 컴포넌트 크기를 제어하는 방법을 배우는 것입니다.

Was this article helpful to you? Yes No

How can we help?