React Native Geolocation 사용하기 [ React Native 위도 경도 구하기]

IOS인 경우 react-native init 통해서 프로젝트를 생성한경우 info.plist에 필요한 키가 설정되어있다. (NSLocationWhenInUseUsageDescription)

geolocation api는 navigator.geolocation 통해 액세스 한다.

geolocation.getCurrentPosition(geo_success, [geo_error], [geo_options]);

getCurrentPostion 함수는 파라메터로 성공콜백, 실패콜백, Option Object 세가지 매개변수를 허용한다.

성공콜백은 아래와 같은 object 객체를 전달한다. 

{
  "timestamp": 1484669056399.49,
  "coords": {
    "accuracy": 5,
    "altitude": 0,
    "altitudeAccuracy": -1,
    "heading": -1,
    "latitude": 37.785834,
    "longitude": -122.406417,
    "speed": -1
  }
}

오류콜백은 에러메시지를 전달한다. Option Object는 enableHighAccuracy (boolean), timeout (milliseconds), maximumAge (milliseconds) 구성되어있다.

timeout : api 요청시 timeout 값 설정한다. (응답반응할수 있는 최대 허용시간 Default INFINITY)

enableHighAccuracy : GPS를 사용할지 여부를 나타낸다. 

maximumAge : 반환된 값의 최대 보존기간을 설정한다.  (Default INFINITY) 0으로 설정하면 장치가 캐시된 위치를 사용할 수 없다. Default 값을 INFINITY 설정하면 항상 캐싱된 값을 반환한다.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class App extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      error: null,
    };
  }
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
  }
  render() {
    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
        {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
      </View>
    );
  }
}
 

latitude : 위도이고 , longitude 경도를 나타낸다.

출처  

https://facebook.github.io/react-native/docs/geolocation#getcurrentposition

https://hackernoon.com/react-native-basics-geolocation-adf3c0d10112

https://medium.com/@icodeinswift/location-permissions-in-ios-apps-always-or-when-in-use-371c1b22e02e

https://medium.com/@icodeinswift/location-permissions-in-ios-apps-always-or-when-in-use-371c1b22e02e