[React Native] RN - 현재 위치 좌표 불러오기

 

안녕하세요.

 

이번시간에는 현재 위치에서 좌표를 불러오는 방법에 대해서 알려드리도록 하겠습니다.

 

Installing

npm install @react-native-community/geolocation --save

안드로이드 권한설정

위치정보 권한 설정을 위해 아래 절차에 따라 진행해 주시면 됩니다.

 

① android > app > main > AndroidManifest.xml 파일을 선택합니다.

② 아래 코드를 복사하여 선택한 파일 안에 코드를 삽입하여 줍니다.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

• 정확한 위치: ACCESS_FINE_LOCATION 권한이 제공하는 위치 정확도를 제공합니다.
• 대략적인 위치: ACCESS_COARSE_LOCATION 권한이 제공하는 위치 정확도를 제공합니다.

전체 코드

import React, {useState} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

const GeoLocationAPI = ({}) => {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLogitude] = useState(null);

  const geoLocation = () => {
    Geolocation.getCurrentPosition(
      position => {
        const latitude = JSON.stringify(position.coords.latitude);
        const longitude = JSON.stringify(position.coords.longitude);

        setLatitude(latitude);
        setLogitude(longitude);
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  };

  return (
    <View>
      <Text> latitude: {latitude} </Text>
      <Text> longitude: {longitude} </Text>
      <TouchableOpacity
        onPress={() => geoLocation()}
        style={{backgroundColor: '#89B2E9'}}>
        <Text style={{color: 'white', textAlign: 'center'}}>
          Get GeoLocation Button
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default GeoLocationAPI;

enableHighAccuracy :

  위치 정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 값입니다.

  true를 지정했으면, 지원하는 경우 장치가 더 정확한 위치를 제공합니다.

  그러나 응답 속도가 느려지며 전력 소모량이 증가하는 점에 주의해야 합니다.

  반면 false를 지정한 경우 기기가 더 빠르게 반응하고 전력 소모도 줄일 수 있는 대신 정확도가 떨어집니다.

  기본 값은 false입니다.

timeout :

  기기가 위치를 반환할 때 소모할 수 있는 최대 시간(밀리초)

maximumAge :

  캐시에 저장한 위치 정보를 대신 반환할 수 있는 최대 시간을 나타내는 양

결과 화면

 

 

[React Native] RN - 카카오 로컬 API 사용하기(좌표를 주소로)