<react-native> style 속성과 styleSheet API ...

 

 

 

 

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}
})

 

 

 

실행결과

 

 

 

 

 

왕왕 쉽구나 쉬웡~~~~