노마드 코더 RN 왕초보 개발기 RN 배우기! 과정기 2일 차

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)

시작하기

• 웹사이트가 아니기에 div를 사용할 수 없기에 View를 사용해야 한다.
  • View는 container이다.
  • 항상 임포트 해야 한다.
• 모든 text는 Text 태그를 사용해야 한다.

 

• 스타일은 아래처럼 적용 할 수 있다.

const styles = StyleSheet.create({
 container : {
 // css
 }
})

• StyleSheet.create 를 사용하는 이유는 자동 완성을 지원하기 때문이다.

• StatusBar는 third-party components다.
  • 시간, 배터리, 와이파이 즉 모바일 상단을 의미한다.
• native(expo)에서는 css 실수하면 에러와 같이 해결방법이 나온다.
• RN은 기존에 있던 AsyncStorage는 사라져서 커뮤니티에 의존해야 한다.
  • React Native Directory 이 사이트에서 찾을 수 있다.
  • sunnylqm/react-native-storage: local storage wrapper for both react-native and browser. Support size controlling, auto expiring, remote data auto syncing and getting batch data in one query. (github.com) 이 사이트를 추천해줌.
• 하지만 expo에서 SDK를 만들어 줌 많은 컴포넌트들을 지원해준다.
  • expo 사이트에서 찾아서 설치만 하면 된다.
  • expo에서는 RN에서 제공하지 않는 것들을 추가적으로 제공해준다.

2.4강

• display의 flex만 사용 가능
  • 이미 View가 flex-container이기에 바로 flexDirection 사용 가능.
  • 부모의 flex 값을 기준으로 자식의 flex 값을 계산함.
  • 부모의 flex 값이 없으면 화면에 렌더링 되지 않음.

2.6강

• 기본 스크롤을 사용할 수 없기 때문에 native에는 ScrollView가 있음.
  • pagingEnabled : 페이지 처럼 보여주기.
  • horizontal : 가로로 스크롤하기.
  • showsHorizontalScrollIndicator={false} : 가로 스크롤바 안 보이게 하기.
  • contentContainerStyle : content 스타일링.
  • indicatorStyle="white" : ios만 스크롤바 색상 변경.
  • persistentScrollbar={true} : 안드로이드만 스크롤바가 투명해지지 않게 함.
• Dimensions으로 핸드폰의 크기를 알 수 있음.

import { Dimensions } from "react-native";

const { width: SCREEN_WIDTH } = Dimensions.get("window");