-
<react-native> style 속성과 styleSheet API ...app/react-native 2022. 4. 9. 17:23반응형
style 속성 배우기
기본
import React from "react"; import { SafeAreaView, Text } from "react-native"; export default function App() { return ( <SafeAreaView> <Text> Hello world! </Text> </SafeAreaView> ) }
컴포넌트 스타일 설정
import React from "react"; import { ImageBackground, SafeAreaView, Text } from "react-native"; export default function App() { return ( <SafeAreaView style={[{backgroundColor:'blue'}]}> <Text style={[{color:'white'}]}> Hello world! </Text> </SafeAreaView> ) }
실행결과
styleSheet 버전
import React from "react"; import {StyleSheet, SafeAreaView, Text } from "react-native"; export default function App() { return ( <SafeAreaView style={[styles.safeAreaView, {backgroundColor:'blue'}]}> <Text style={[styles.text, {color:'white'}]}> Hello world! </Text> </SafeAreaView> ) } const styles = StyleSheet.create({ safeAreaView: {flex:1, alignItems: 'center', justifyContent:'center'}, text: {fontSize:20} })
실행결과
왕왕 쉽구나 쉬웡~~~~
반응형'app > react-native' 카테고리의 다른 글
<react-native>view 컴포넌트와 css 박스 모델/자원과 아이콘 사용하기 (0) 2022.04.11 <react-native> faker / error 확인 (1) 2022.04.09 <react-native> Button, alert, ... (0) 2022.04.09 react-native를 시작하면서/window 개발환경 설정/오류 해결_2 (0) 2022.04.06 react-native를 시작하면서/window 개발환경 설정/오류 해결_1 (0) 2022.04.06