[앱 화면 만들기] - 구성한 화면 꾸미기, Styles

태그 스타일을 주는 방식 또한 리액트 네이티브에서 제공하는 stylSheet 기능을 가져와 적용한다. 

styleSheet는 결국 객체(딕셔너리)를 하나 만드는데, 이 객체에 사용법 대로 생성한 다음 잘 정리해두면 JSX엘리먼트에서 가져다가 사용만 하면된다.

 

사용할 땐 모든 태그에 공통적으로 있는 style속성에 아래서 만든 객체 키 값을 부여하여 적용한다.

<View style={shtyles.container}>

 

이렇게 연결해주면은 스타일을 적용시킬 수 있다.

 

* 자주 사용하는 스타일 속성

import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } from "react-native"; import favicon from "./assets/favicon.png"; export default function App() { return ( <View style={styles.container}> <View style={styles.textContainer}> <Text style={styles.textStyle}>화이팅!@!!!@</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", justifyContent: "center", alignContent: "center", }, textContainer: { margin: 10, padding: 10, borderRadius: 19, borderWidth: 2, borderColor: "#000", borderStyle: "dotted", }, textStyle: { color: "red", fontSize: 20, fontWeight: "700", textAlign: "center", }, });

스타일 속성에 대한 정보는 모두 외울 필요 없으며, 공식문서를 통해 내용을 숙지만 해두자! 

 

https://reactnative.dev/docs/style#docsNav 

Style · React Native

https://reactnative.dev/docs/layout-props