스타일

Inline Style

<Text>
  The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox
  jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>.
</Text>

Object Style

const italic = {
  fontStyle: "italic"
};
const bold = {
  fontWeight: "bold"
};

...

render() {
  return (
    <Text>
      The quick <Text style={italic}>brown</Text> fox
      jumped over the lazy <Text style={bold}>dog</Text>.
    </Text>
  );
}

StyleSheet.create

StyleSheet는 불변 객체라서 수정이 불가능합니다. 수정 가능한 객체를 원하면 Object Style을 이용해야 합니다.

스타일 병합

버튼에 스타일을 적용할 때 두 개 이상의 스타일 객체가 필요할 때가 있을 수 있습니다.

const styles = StyleSheet.create({
  button: {
    borderRadius: "8px",
    backgroundColor: "#99CCFF"
  },
  accentText: {
    fontSize: 18,
    fontWeight: "bold"
  }
});

스타일 객체들을 배열을 이용해 여러 스타일을 적용할 수 있습니다. 만일 스타일이 중복되는 것이 나열되어 있으면 더 오른쪽에 있는 스타일을 적용합니다. false(false, null, undefined) 값들은 무시됩니다.

class AccentButton extends Component {
  render() {
    return (
      <Text style={[styles.button, styles.accentText]}>
        {this.props.children}
      </Text>
    );
  }
}

인라인 스타일도 함께 적용할 수 있습니다.

class AccentButton extends Component {
  render() {
    return (
      <Text style={[styles.button, styles.accentText, {color: "#FFFFFF"}]}>
        {this.props.children}
      </Text>
    );
  }
}

조건부 스타일을 사용할 수도 있습니다. 다음은 버튼이 눌렸을 때(this.state.touching) highlight를 적용하는 코드입니다.

<View style={[styles.button, this.state.touching && styles.highlight]} />

스타일 객체 내보내기

컴포넌트가 복작해질 때 다음과 같은 구조를 갖는다고 가정합니다.

- ComponentName
  |- index.js
  |- styles.js

styles.js 파일은 아래와 같습니다.

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  text: {
    color: "#FF00FF",
    fontSize: 16
  },
  bold: {
    fontWeight: "bold"
  }
});

export default styles;

index.js 파일은 아래와 같습니다.

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import styles from "./styles";

class ComponentName extends Component {
  render() {
    return (
      <Text style={[styles.text, styles.bold]}>
        Hello, world
      </Text>
    );
  }
}

Props로 넘겨주기

CustomizableText를 사용할 때 스타일 prop을 넘겨주면 아래와 같이 사용할 수 있습니다.

import React, { Component } from "react";
import { View, Text } from "react-native";

class CustomizableText extends Component {
  render() {
    return (
      <Text style={[{fontSize: 18}, this.props.style]}>
        Hello, world
      </Text>
    );
  }
}

스타일 재사용 및 공유

- js
  |- components
     |- Button
        |- index.js
        |- styles.js
  |- styles
     |- styles.js
     |- colors.js
     |- fonts.js

Flexbox를 이용한 레이아웃

절대 위치를 이용한 레이아웃

position: absolute

종합

styles/Mondrian/index.js

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

import styles from "./style";

class Mondrian extends Component {
  render() {
    return (
      <View style={styles.parent}>
        <View style={styles.topBlock}>
          <View style={styles.leftCol}>
            <View style={[styles.cellOne, styles.base]} />
            <View style={[styles.base, styles.cellTwo]} />
          </View>
          <View style={[styles.cellThree, styles.base]} />
        </View>
        <View style={styles.bottomBlock}>
          <View style={[styles.cellFour, styles.base]} />
          <View style={[styles.cellFive, styles.base]} />
          <View style={styles.bottomRight}>
            <View style={[styles.cellSix, styles.base]} />
            <View style={[styles.cellSeven, styles.base]} />
          </View>
        </View>
      </View>
    );
  }
}

export default Mondrian;

styles/Mondrian/style.js

import React from "react";
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  parent: {
    flexDirection: "column",
    position: "absolute",
    top: 30,
    left: 0,
    right: 0,
    bottom: 0
  },
  base: { borderColor: "#000000", borderWidth: 5 },
  topBlock: { flexDirection: "row", flex: 5 },
  leftCol: { flex: 2 },
  bottomBlock: { flex: 2, flexDirection: "row" },
  bottomRight: { flexDirection: "column", flex: 2 },
  cellOne: { flex: 1, borderBottomWidth: 15 },
  cellTwo: { flex: 3 },
  cellThree: { backgroundColor: "#FF0000", flex: 5 },
  cellFour: { flex: 3, backgroundColor: "#0000FF" },
  cellFive: { flex: 6 },
  cellSix: { flex: 1 },
  cellSeven: { flex: 1, backgroundColor: "#FFFF00" }
});

export default styles;