반응형 리액트네이티브4 [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(2) - Stack으로 페이지 이동 ㅅ2020/04/08 - [Javascript/React] - [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(1) - 개요 및 설치 화면 간 이동 StackNavigator 설치 > npm install @react-navigation/stack 사용법 - Screen과 Navigator 두가지 속성을 필수로 return 해야한다. >> Screen의 필수 props : name, component >> 하나에 Navigator에 여러개의 Screnn이 있을 수 있으며 초기 경로를 지정하면 Navigator에 initialRouteName 옵션을 사용 - 는 모든 네비게이터 구조를 감싸며 네비게이션 트리와 상태를 관리한다. - navigation 속성을 .. 2020. 4. 16. [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(1) - 개요 및 설치 React Native Docs Navigator? 모바일 앱은 대부분 단일 화면으로 구성되지 않는다. 웹에서는 화면이동을 태그를 사용하지만 리액트 네이티브에서는 navigation을 사용한다. Navigator를 이용해 여러 화면을 이동하는 작업을 관리한다. react-navigation 패키지를 이용해 쉽게 사용할 수 있다. * 종류 Stack : 새로운 화면이 기존 화면위에 겹겹이 쌓이는 화면 Drawer : 화면에 우측으로 미는 제스쳐를 통해 좌측에 열리는 화면 BottomTab : 화면 하단에 아이콘을 통해 경로를 전환 MaterialBottomTab : 머티리얼 디자인을 사용한 BottomTab MaterialTopTab : 머티리얼 디자인을 사용한 상단 탭 바 => 각각의 네비게이션은 추가적.. 2020. 4. 8. [ React Native ] 윈도우에서 리액트 네이티브 개발 환경 구성 - Expo-cli 1. expo-cli 설치 1.1 명령 프롬프트 실행(관리자 권한) 1.2 설치 > npm install expo-cli -global 2. 프로젝트 생성 2.1 프로젝트 생성(생성할 폴더로 이동한 뒤) > expo init [ 프로젝트명 ] 2.2 생성된 프로젝트 폴더로 이동 > cd [ 프로젝트명 ] 2.3 실행 > expo start 3. 실행 3.1 모바일에서 Expo 어플 설치 3.2 개발 PC와 모바일 기기 같은 네트워크로 잡기 3.3 QR 코드를 촬영하면 설치한 Expo 앱으로 연결된다. * VS Code로 Expo 프로젝트 연결 1) 비쥬얼스튜디오 코드 > 상단 File > Open Folder 2) 생성한 폴더 선택 3) VS Code 터미널창 열기 4) expo start ** 3번과 .. 2020. 4. 3. [ React Native ] 윈도우에서 리액트 네이티브 개발 환경 구성 - React Native CLI 리액트 네이티브 공식문서 React Native 개발환경? Expo CLI와 React Native CLI 두가지가 있음. => React Native CLI를 사용할 것! Expo CLI가 가장 쉽게 시작할 수 있는 방법으로 React Native 기반으로 구축된 도구 모음을 많이 포함하고 있지만 필요없는 기능까지 설치되기 때문에 무거움 Expo CLI는 Node.js만 있으면 사용할 수 있지만 React Native CLI는 Xcode 또는 Android Studio가 필요함 설치 목록 Node.js React Native CLI Python2(* Python3를 사용해도 괜찮지만 공식문서에서는 Python2를 설치하라고 나옴) JDK Android Studio Chocolatey Chocolatey.. 2020. 3. 31. 이전 1 다음 반응형
