FE 기술/React Native

[React Native] SafeAreaView 하위 컴포넌트 동적으로 사이즈 조절하는 방법

2024.12.08

# 외부 라이브러리를 활용한 동적 스타일링달력 레이아웃초기상황 : 아래와 같은 구조로 최상위에 calenderPage가 있고 그안에 calender에서 DateCell을 이중배열 map 돌려서 달력을 구현하고 있음.![](https://velog.velcdn.com/images/hafnium1923/post/8b656529-2c39-4054-a863-2d5658104d15/image.png)# 문제상황 1목표: 상단 Header와 바텀 Navigation을 제외한 가운데 빈 공간에 DateCell로 만든 표가 헤더와 네비게이션을 제외한 영역에 알맞게 꽉차길 원함. 기기에 맞게 동적으로 스타일링 하기 위해 useWindowDimensions()를 이용해 높이를 계산하고, Header와 Navigation의..

FE 기술/React Native

[React Native] React-Native-Cli 환경설정(MAC) + 환경설정 에러 관련

2024.12.08

# React-Native-Cli 환경설정 (MAC)## React Native리액트 네이티브를 개발할 때는 크게 두 가지의 방법이 사용된다.- Expo- React-Native-CliExpo는 초기 프로젝트 세팅이 쉬운 대신 필요없는 의존성이 마구 추가되어있고 필요한 라이브러리는 또 따로 설치해줘야한다. React-Native-Cli는 초기 프로젝트 세팅이 어려운 대신 원하는 의존성만 추가해서 커스텀 할 수있다. 또한 native 파일 접근 유무에 대해서도 차이를 가지고 있다. Expo는 접근할 수 없지만 React-Native-Cli는 접근 할 수 있다는 것.React 개발자인 나의 입장에서 Expo는 CRA로 프로젝트 세팅하는 것이고 React-Native-Cli는 Webpack과 같이 별도의 모듈..

[React Native] SafeAreaView 하위 컴포넌트 동적으로 사이즈 조절하는 방법

[React Native] React-Native-Cli 환경설정(MAC) + 환경설정 에러 관련

티스토리툴바