[React Native] 리액트 네이티브 Navigation 사용하기 (라우팅)
·
Front-End/React Native
리액트 네이티브에서 가장 많이 사용되는 라이브러리 중 하나인 React Navigation을 활용해서 하단 탭 바를 구현해 보겠습니다. 리액트의 라우터를 사용하는 것과 비슷합니다. 📝 공식 문서 ✔ 공식 문서에 예제 코드가 나와있으니 따라 해 봅시다. 😀 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org ⦁ 설치하기 npm install @react-navigation/native or yarn add @react-navigation/native //Expo 사용 시 npx expo install react-native-screens reac..
[React Native] 리액트 네이티브 안드로이드 실행 방법 (Open Android)
·
Front-End/React Native
QR코드를 Expo 앱에서 스캔하여 리액트 네이티브를 실행시킬 수도 있지만, 안드로이드 스튜디오를 설치하고 Virtual Device를 생성하면 컴퓨터에서도 모바일 안드로이드 화면을 확인할 수 있습니다. 개발하기 편리하겠죠? 😀 📝 설치 방법 ⦁ Failed to resolve the Android SDK path. 안드로이드 스튜디오를 설치하지 않아서 발생하는 에러입니다. 리액트 네이티브의 open Android 명령어를 실행하려면, 먼저 안드로이드 SDK을 설치하고, 가상 디바이스를 생성해야합니다. https://developer.android.com/studio?gclid=Cj0KCQjw48OaBhDWARIsAMd966DMyOfxDlPjoseRaqwTyh4qSqyyum5xe8CW5CdZ7wl4Ox8..
[React Native] 리액트 네이티브 To Do 앱 만들기 (AsyncStorage, Map)
·
Front-End/React Native
https://nomadcoders.co/react-native-for-beginners 왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders React Native로 2개의 앱 만들기 nomadcoders.co 프로젝트를 하면서 앱을 개발해야 하는 일이 생겨서 니꼬 선생님의 강의를 듣고 React Native를 사용해 To Do 앱을 만들었습니다. Expo를 사용하면 환경 설정이 간단하고 제공해 주는 API, 컴포넌트들이 많아서 쉽고 빠르게 개발이 가능합니다. 📝 To Do 앱 ⦁ 🧾 기능 1. To Do List / 여행 리스트 추가 삭제 2. 체크박스 선택 시 텍스트 줄긋기 및 색 변경 ( 완료 체크 ) 3. AsyncStorage 사용 ( Local Storage 비..