[React-Native] 날씨 앱 만들기(1/6)_Layout Part.1
(노마드 코더 강의 정리함)
React Native Packages
StyleSheet.create
- StyleSheet.create를 쓰면 자동완성 쓸 수 있어서 좋다.
- 이거 없이 object 형식으로도 동작은 하지만 자동완성 기능 없어서 불편하기 때문에 쓰자.
ReactNative.dev
https://reactnative.dev/docs/components-and-apis
Core Components and APIs · React Native
React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat
reactnative.dev
- 컴포넌트랑 API 등 문서는 여기서 찾아보면 된다.
- 버전 업데이트 되면서 옛날보다 없어진 것도 많고 필수적인것만 남았다고 함.
Third Party Packages
reactnative.directory
https://reactnative.directory
react-native 커뮤니티이다.
여러 사람들이 여기에 apis package들을 등록해 놓지만 업데이트가 늦거나 버그가 발생할 확률이 높다.
그래서
docs.expo.dev
Expo Documentation
docs.expo.dev
expo에서 제공하는 apis package 들을 사용하면 됨.
StatusBar
statusbar 는 expo에서 제공하는것도 있고 react-native 에서 제공하는 것도 있다.
Layout System
Flexbox
기억해야할 것
1. 모바일에서 react-native는 기본 direction이 colunm이다. (가로로 하려면 flexDirection: "row" 로 설정해줘야함)
2. 컨테이너를 만들 때, 99%는 width와 height를 쓰지 않는다.
- 가로 세로 설정 대신 위처럼 flex로 비율을 줘서 사용한다.
- 부모 컨테이너에 flex를 주지 않으면 안나옴. 부모 컨테이너 기준으로 비율이 맞춰지는 거임.