React Native 4주차 강의 요약

이번 주차 강의의 주제는 레이아웃, props, state이다.

props와 state는 RN의 꽃이라고 하신다.

​

1. Component에 스타일 입히기!

rncs로 코드의 틀을 불러온다

style.prop안의 구조는 이렇다.

실습)

이런 식으로 텍스트에 style을 입혀주면

짠. 그 이외의 스타일들은 구글에서 react native change text color 등 알아서 검색해서 알아보자!

​

앞주차의 사진처럼 이렇게 인라인 방식으로 넣을 수도 있지만 가독성면에서, 효율성 면에서 위의 방식이 더 좋다.

​

레이아웃을 디자인할때 이렇게 퍼센트(%)로 크기를 지정해주면

이렇게 화면 전체를 기준으로 색을 입힐 수 있다.

​

flex는 비율에 맞추어 화면에 색을 덮는 역할을 한다. 사용은 다음과 같다.

이렇게 하면 1 : 1 : 2 : 1의 비율로 RYGB의 색상이 화면에 덮힌다.

그럼, 가로로 배치하는 건 어떻게 할까?

가로는 flexDirection 속성으로 이를 구현한다!

이렇게 하면

가로로 디자인된다.

이 사진을 참고해서 용어 알자.

alingItems : 'center' // 가운데 정렬

justifyContent : "flex_start" // 행이 시작하는 점으로부터 정렬된다.

실제 개발할 때는 구글링해서 코드 다양하게 많이 쓰기!

예시이다.

​

​

/*

//11월 11일 추가.

복습 겸 카카오톡과 그래도 제일 비슷하게 사진, 이름, 코멘트를 다는 코드를 짜봤다. 엄청 간단해보였는데 코드는 더럽게 길었다. ^^

 

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

export default class App extends Component {
  render() {
    return (
      <View>
      <View style = {{flex : 1}}></View>
      <View style = {{width : 100, height : 50, }}></View>
      <View>
      <View style = {styles.Main}>
        <Image source = {require("./고영희.jpg")} style = {styles.Circle} />
        <View style = {styles.StyleName} ><Text>     김민겸 </Text></View>
        <View style = {styles.StyleComment}>
          <Text>
            오늘도 꽃 같은 하루 보냈으면 ~^^
          </Text>
      </View>
</View>

<View style = {styles.Main}>
          <Image source = {require("./임현식.jpg")} style = {styles.Circle} />
        <View style = {styles.StyleName} ><Text>     임현식 </Text></View>
        <View style = {styles.StyleComment}>
          <Text>
            멜로디*^^*
          </Text>
        </View>
        </View>
        </View>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  Main : {
    flexDirection : 'row',
  },
  Circle : {
    flex : 0.8,
    width : 150,
    height : 50,
    borderRadius : 25,
  },
  StyleName : {
    flex : 3,
    fontSize : 100,
    justifyContent : 'center', // 수평 방향 정렬 방식
    justifyContent : 'space-between',
    justifyContent : 'space-around',
  },
  StyleComment :{
    flex : 7,
    fontSize : 20,
    borderColor : 'pink',
    borderWidth : 3,
    backgroundColor : 'yellow',
    justifyContent : 'center', // 수평 방향 정렬 방식
    justifyContent : 'space-between',
    justifyContent : 'space-around',
  }
})

이렇게 하는게 맞나 싶다. 암튼 어설프게나마 완성!!

*/

​

​

​

2.props와 state

둘 다 컴포넌트의 특성을 정해준다. 그러나 props는 변할 수 없으며 state는 변할 수 있다. state를 바꾸기 위해서는 setState로 인해 바꿀 수 있다.

render함수 안의 코드를 보면 setState안에서 name변수가 "김민겸"이 되고, 따라서 버튼을 눌렀을 때 text문에서 출력되는 name변수의 값은 "김민겸"으로 바뀐다.

​

4주차 첫번째 과제이다.

// props와 state를 사용하는 방법을 터득하지 못해서인지, 전반적으로 이해도가 떨어서인지 해결하지 못했다. 구글링해서 더 검색해보며 추후 해결 예정.