-
[React-Native] Expo Vector icon 으로 TabBar icon 변경하기
Tab Navigator 로 구현한 TabBar 이다. 버튼을 눌렀을 경우 현재 위치해있는 컴포넌트 아이콘이 변경되며 파란색으로 변경되며, 아닐 경우 회색으로 유지된다. 화살표 아이콘을 IconLabel 과 같은 의미를 가진 아이콘으로 변경을 하려 한다. 아이콘 탐색 https://icons.expo.fyi/ expo 에서 제공하는 Vector icon 이다. 변경하고자 하는 icon 의 이름을 탐색 후 사용하면 된다. filter 기능을 이용해 원하는 종류의 아이콘만을 탐색할 수 있다. 코드에 적용하기 다음과 같이 보여지는 Tab.Screen 에 options 를 주어 기능을 ...
-
[React-Native] Tab Navigator 를 사용해 화면 구성하기
다음과 같이 TabBar 를 모두 구성한 뒤의 모습이다. Navigator 버튼을 눌렀을때 보여지는 화면에 구분을 하고싶다. Navigation 의 종류 Stack Navigator Tab Navigator Draw Navigator 이 중, 해당 프로젝트에서는 Tab Navigator 를 사용할 것이다. Navigation 이 분리 된 이유로는, 원래 하나의 패키지에 모두(Stack, Tab, Draw) 포함되어 있었지만, Stack 과 Tab 만을 사용하는 경우 Draw 는 사용하지 않아 이는 필요없는 패키지로 구분되어 전체 크기에 영향을 끼치게 되었다. 때문에, 이를 보완하기 위해 패...
-
[React-Native] 프로젝트 생성 시 발생한 에러 'npx create-expo-app'
에러 확인 💥 npx create-expo-app . npx 명령어를 사용해 expo app 을 생성하였다. 생성한 앱을 실행하기 위해 expo start 를 입력하였다. 여기까진 괜찮았지..😩 오늘도 역시 무탈히 지나가는 일 없이 에러 발생..😭😭 앱을 실행 시키고 QR 코드를 iPhone 에서 실행하자 bundling 메세지와 함께 에러 메세지가 반긴다. 에러를 살펴보면, Error: Problem validating fields in app.json. • Field: slug - ‘slug’ must match pattern “^[a-zA-Z0-9_-]+$”. app.json...