React native 강의 정리 (2)

React native 에서의 CSS extension

//...
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
//...

* fontSize 의 경우 pixel 으로 적용할 것이라면 "20px" 과 같이 작성해야하고 일반 숫자로도 적용할 수 있다. 이 경우 Size 는 알아서 변환이된다. (dpi 일 듯)

* CSS 를 적용할 때 spread operator 를 사용하여 하나의 오브젝트로 넘기면 두개이상의 CSS 를 여러개 적용 시킬 수 있다. (ex. <MyComponent style={...styles.container1, ...styles.containter2}/>)

 

 

 

주목해볼 만한 CSS extension속성

• flex
• direction
• justifyContent
• alignItems
• flexWrap
• noWrap

 

 

 

Flex layout

• flex 는 부모 컴포넌트가 제공해주는 공간을 자식 컴포넌트들이 차지하기 위해 벌이는 경합 이라고 생각하면 좋다.
• flex 1 인 컴포넌트와 flex 2인 컴포넌트가 같은 레벨에 존재한다면 이는 1:2로 공간을 차지할 것이다.
• flex box 의 default 는 row 이다.
• flex direction 의 default 는 column (위에서 아래) 이다.
• width 와 height 를 지정하는 방식 사용을 지양한다.
• 가능하면 flex layout 을 이용하여 작업하는 것이 좋다.
• 주목해볼만한 CSS extension 은 flex 와 같이 사용하기에 좋다.

 

 

 

App + Loading 화면 프로토타입

App.js

import React, { Component } from "react";
import Loading from "./Loading.js";

export default class App extends Component {
  render() {
    return (
      <Loading/>
    );
  }
}

Loading.js

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

export default class Loading extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.loadingText}>loading...</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
    paddingHorizontal: 30,
    paddingVertical: 100,
    backgroundColor: "#FDF6AA"
  },
  loadingText: {
    fontSize: 30,
    color: "#2c2c2c"
  }
});