React Native에서 배경 위치 정보 + Geofence

하고 싶은 일



이번에는 React Native 앱에서 Geofence를 사용하여 특정 장소에 출입했을 때 정보를 서버에 날려 상태를 변경하기 위해 도입했습니다.

Geofence를 사용하려면 앱이 백그라운드 위치 정보(Always)를 실행할 수 있는 상태에 있어야 합니다.

이미지


사용 라이브러리



react-native-background-geolocation
htps : // 기주 b. 코 m / t 란시 s와 r 소 ft / 레아 ct-nachi ゔ ぇ

Android 버전은 유료이므로주의.
아무래도 무료로 사용하고 싶은 경우는, 이쪽을 사용합시다.
htps : // 기주 b. 코 m / 마롱 85 / 레아 ct - 나치

배포(iOS)



0.60 이상을 상정하고 있습니다.
공식 설정 문서는 이쪽
iOS : htps : // 기주 b. 코 m / t 란시 s와 r 소 ft / 레아 ct-nachi ゔ ぇ ㅇ ㅇ ㅇ 어서. md
Android : htps : // 기주 b. 코 m / t 란시 s와 r 소 ft / 레아 ct-nachi ゔ ぇ - ㅇ ㅇ ㅇ D 로이 D 어서. md

패키지 설치


yarn add react-native-background-geolocation

Xcode에서 설정




Audio, Location updates, Background fetch 사용

Info.plist





앱에서 구현


import BackgroundGeolocation, { Geofence } from "react-native-background-geolocation";

    ...
    BackgroundGeolocation.ready({
      // Geolocation設定
      desiredAccuracy: BackgroundGeolocation.DESIRED_ACCURACY_HIGH,
      distanceFilter: 10,
      stopTimeout: 1,
      debug: true, 
      logLevel: BackgroundGeolocation.LOG_LEVEL_VERBOSE,
      stopOnTerminate: false,  
      startOnBoot: true, 
      batchSync: false, 
      autoSync: true
    }, (state) => {
      console.log("- BackgroundGeolocation is configured and ready: ", state.enabled);

      if (!state.enabled) {
        BackgroundGeolocation.start(function() {
          console.log("- Start success");
        });
      }
    });

    BackgroundGeolocation.addGeofence({
        identifier: "Home",
        radius: 200,
        latitude: 47.2342323,
        longitude: -57.342342,
        notifyOnEntry: true
    });

    BackgroundGeolocation.onGeofence(function(geofence, taskId) {
        this.handleWithGeofenceLocation(geofence.location)
        BackgroundGeolocation.finish(taskId);
    });

    BackgroundGeolocation.removeGeofence("Home");


개발 시에는 debug 모드에서 확인하면 소리와 경고로 움직이고 있는지 여부를 확인할 수 있습니다.

Tips



샘플 앱(공식)



매개변수 등이 복잡하므로 이해하기 위해 샘플 앱을 터치하는 것이 좋습니다.

Geofence 제한



Geofence의 수에 대해 iOS는 20개, Android는 100개까지의 제한이 있습니다.

요약



몇번이나 사용한 적이 있어, 문제가 많은 이미지의 react-native-background-geolocation입니다만, 최신 버젼으로 재차 ​​도입을 한 곳 꽤 부드럽게 진행되었습니다. Ver 3.6.0 이상이라면 react-native-background-fetch도 더 이상 필요하지 않습니다.

시간이 있으면 Geofence 이외의 부분도 연구해 보려고 생각합니다.

좋은 웹페이지 즐겨찾기