JSX 문법 - Style에 대해

태그에 스타일을 주는 것으로 더 다채롭게 태그를 활용

예시) 스타일 만들기

const styles = StyleSheet.create({              <--
  container: { 					<--
    flex: 1,
    backgroundColor: '#fff',
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {					<--
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }
});

--> 리액트 네이티브가 제공하는 StyleSheet 기능을 가져와 사용하고 있음
--> 딕셔너리 형태로 만들어서 styles변수에 담아 사용

예) 태그에 스타일 입히기

 <View style={styles.container}>                       <--
      <Image 
        source={favicon}
        resizeMode={"repeat"}
        style={styles.imageStyle}                      <--
      />
    </View>
    

--> styles 변수에 딕셔너리 형태로 담긴 스타일들을 태그에 입히는 모습

자주 사용하는 스타일 태그들

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
return (

<View style={styles.container}>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>Study Code</Text>
  </View>
</View>

);
}

const styles = StyleSheet.create({
container: {

//영역을 잡는 속성입니다. 따로 자세히 다룹니다.  
//flex: 1은 전체 화면을 가져간다는 뜻입니다
flex: 1,

//영역의 배경 색을 결정합니다
backgroundColor: '#fff',

//아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
//flex를 자세히 다룰때 같이 자세히 다룹니다
justifyContent:"center",
alignContent:"center"

},
textContainer: {

//영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
margin:10,

//영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
padding: 10,

//테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
borderRadius:10,

//테두리의 두께를 결정합니다
borderWidth:2,

//테두리 색을 결정합니다
borderColor:"#000",

//테두리 스타일을 결정합니다. 실선은 solid 입니다
borderStyle:"dotted",

},
textStyle: {

//글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
color:"red",

//글자의 크기를 결정합니다
fontSize:20,

//글자의 두께를 결정합니다
fontWeight:"700",

//가로기준으로 글자의 위치를 결정합니다
textAlign:"center"

}
});