본문 바로가기

STUDY/React Native

(3)
React Native | React Navigation을 이용한 스크린 이동 1. react-navigation 설치 npm install @react-navigation/native expo로 만든 프로젝트는 expo에도 설치 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 2. NavigationContainer로 감싸기 전체 앱을 NavigationContainer로 감싼다. 이제 navigation처리를 할 준비가 끝났다. // App.js import "react-native-gesture-handler"; import React from "rea..
React Native | Expo를 이용해 위치 정보 얻기 (expo-location) React Native에서도 Geolocation을 제공하고있기는 하지만, Expo를 이용해보기로 한다. 먼저 expo를 이용해 expo-location을 설치 expo install expo-location 그리고 나서는 엄청 쉽다. 일단 import해주기 import * as Location from "expo-location"; 사용자의 디바이스 위치에 접근하기 위한 동의를 구한다. 참고로 해당 함수는 promise함수로 async await을 붙여서 사용한다. (공식문서 참조) Location.requestPremissionAsynce()메서드를 통해 위치 정보를 얻기 위한 알림창이 생성된다. 사용자가 동의하면, Location.getCurrentPositionAsynce()메서드가 실행되어 사용..
React Native | Expo CLI로 프로젝트 생성 /실행하기 Expo CLI create-react-app처럼 필요한 기본 세팅을 빠르게 해줌 Expo앱을 이용하면 본인의 휴대폰에서 바로바로 앱을 테스트 해볼 수 있다! native파일들을 제어하기 힘듦 필요한 모듈들을 많이 지원하고 있음 React Native CLI native파일들에 접근할 수 있음 XCode나 Android Studio가 필요 0. Node설치 node.js가 설치되어있지 않다면 설치해주어야 하며, 버전이 12 LTS이상이어야 함 없으면 다운로드 및 설치 해주기 Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. expo설치 -g는 글로벌하게 설치하겠다는 ..