크로스 플렛폼 - Geolocation

기기의 위도, 경도를 알아내기 위한 API를 구현해보겠습니다.

 

아래 명령어로 geolocation module을 설치합니다. 

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

 

*설치 후 geolocation module link와 pod install을 진행해야 한다고 에뮬레이터에 가이드가 나올 수 있다 시키는대로 진행하자

 

위치 정보를 이용하기 위한 권한이 iOS의 경우 기본으로 활성화되어 있으나 안드로이드의 경우 AndroidManifest.xml에 아래 권한 요청을 추가해 줘야 합니다. (추가 후 앱 재실행)

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

 

1. geolocation.js를 만들고 geolocation을 추가한다

import Geolocation from '@react-native-community/geolocation'

 

2. 현재위치 정보, 새로운 위치 정보, 위치 정보 watch id를(해제를 위해) 저장하는 state 정의

this.state = { 
            originalCoords: {},
            updatedCoords: {},
            id: ''
        }

3. 현재 위치 정보를 받아오는 로직을 componentDidMount에 정의

Geolocation.getCurrentPosition(
            (info) => {
                this.setState({
                    originalCoords: info.coords
                })
            },
            (err) => console.log('err : ', err)
        )

코드 실행 시 1회 현재 위치 정보를 얻어 state의 originalCoords에 저장, 에러 발생 시 로그 출력

 

4. 위치 정보가 갱신(기기가 이동) 할 때 마다 정보를 업데이트 하는 watch 정의

let id = Geolocation.watchPosition(
            (success) => {
                this.setState({
                    id,
                    updatedCoords: success.coords
                })
            },
            (err) => console.log('err : ', err)
        )

watch의 id를 저장해둬야 나중에 해제가 가능하다

 

5. watch를 해제하는 함수 추가

clearWatch(){
        Geolocation.clearWatch(this.state.id)
    }

4에서 저장한 state 의 id를 사용하여 watch를 해제해준다.

 

6. render에 시작 시 위치, 업데이트 되면서 바뀌는 위치 정보를 표시해주도록 정의한다.

 

실행 시(왼쪽) 초기 위치 정보가 출력되고 위치 이동 시(우측) 업데이트 된 위치 정보가 표시 됨

iOS emulator의 경우 Debug -> Location 메뉴를 통해 emulator의 위치 정보를 변경할 수 있고 변경 시 바로 앱의 위치 정보가 업데이트 됨을 확인 할 수 있다.

 

ClearWatch 버튼을 눌러 위치 정보 갱신을 중지하면 emulator의 위치 설정을 변경해도 더 이상 업데이트가 되지 않는 것을 확인 할 수 있다.