반응형
- 프론트에서 필요한 데이터를 미리 준비하자
- 컴포넌트를 어떻게 구성할지 생각하자
상태바의 크기는 react-native-iphone-x-helper로 구할 수 있다. -> 아카이빙됨.getBottomSpace, getStatusBarHeight로 구해서 이만큼 패딩주면됨- react-native-safe-area-context를 사용하자.
- 아이콘은 @expo/vector-icons를 사용하자.
- 패딩, 마진값을 보고싶으면 백그라운드 컬러를 이용하자.
- react-native-safe-area-context를 사용하여 상태바 크기 구할 수 있다.
- https://github.com/th3rdwave/react-native-safe-area-context
- <SafeAreaProvider>로 <SafeAreaView>를 감싸서 사용한다.
- <SafeAreaView>에 안전한 영역으로 사용할 부분을 edges에 정의해서 사용한다.
- right, left, top, bottom 중에 선택해서 사용가능
- 자식 컴포넌트는 justifyContent를 사용해서 정렬가능
- 중앙: center
- 떨어트리기: space-between
- 세로 마진은 위아래 컴포넌트 중 하나에 두는 것보다는 사이에 View 컴포넌트에 height을 줘서 마진을 두는게 유지보수할 때 안 헷갈린다.
- <Margin height={10}/> 형식의 커스텀 컴포넌트로 만들어서 사용 추천
반응형
'Development > ReactNative' 카테고리의 다른 글
react native. custom hook (0) | 2023.09.25 |
---|---|
react native. 컴포넌트와 props (0) | 2023.09.24 |
react native core component (0) | 2023.09.24 |