스타일¶
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;