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()메서드가 실행되어 사용자의 geolocation값에 접근할 수 있다.

 const [isLoading, setIsLoading] = useState(true);

  const getLocation = async () => {
  
    try {
    
      await Location.requestPermissionsAsync();
      
      const {
        coords: { latitude, longitude },
      } = await Location.getCurrentPositionAsync();
      
      setIsLoading(false);
      
    } catch (e) {
      Alert.alert("위치정보를 가져올 수 없습니다.");
    }
    
  };

 

Allow Once를 눌러주자

 

*시뮬레이터 위치 설정하기

Features > Location > Custom Location을 통해 위치값을 변경할 수 있음!

 

 

*특정 주소의 위도/경도 값 구하기

맥 기본 앱인 지도를 실행

 

지도 앱을 켜서 원하는 위치의 핀을 클릭 > i 아이콘 클릭

 

공유 아이콘 클릭 > Simulator선택

 

---

🚧 Geolocation · React Native

 

Location - Expo Documentation