浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「@react-native-community/geolocation」ライブラリで現在の緯度経度を取得する

タイトル通り、アプリから現在の緯度経度を取得する方法についてです。
React Native にも Geolocation の機能はあるようですが、現在は非推奨とのことなので、代わりに「@react-native-community/geolocation」というライブラリを使用することにしました。

GitHub のページはこちらから。

GitHub – react-native-geolocation/react-native-geolocation: Geolocation APIs for React Native
https://github.com/react-native-geolocation/react-native-geolocation

 

導入方法ですが、まず下記のコマンドでライブラリをインストールします。

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

// iOS の場合は下記も実行する
npx pod-install

で、Android の場合は AndroidManifest.xml に下記を追加します。

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

iOS の場合は Info.plist の項目に NSLocationWhenInUseUsageDescriptionNSLocationAlwaysAndWhenInUseUsageDescription を追加してください。
なお、アプリが iOS 10 以前をサポートしている場合は NSLocationAlwaysUsageDescription も追加してください。
事前準備はこれで完了です。

そして、位置情報を取得したいページで下記をインポートします。

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

あとは、位置情報の取得したいタイミングで下記を実行すればOKです。

const options = {};
Geolocation.getCurrentPosition(info => {
  console.log(`latitude: ${info.coords.latitude}`);
  console.log(`longitude: ${info.coords.longitude}`);
}, error => {
  console.log(error);
}, options);

こちらを実行すると、現在の位置情報の緯度経度が取得できました!
サンプルコードでは、とりあえずログ表示しているだけですが、state で管理すると後々扱いやすいと思います。

…が、上記のサンプルコードを見てわかる通り、現在オプションが未指定です…。
enableHighAccuracytrue に設定して、出来る限り高精度の位置情報を取得したかったのですが、何故か設定するとエラーになってしまいました…。
別に高精度の位置情報を取得する必要はないのでこれでも問題はないのですが、できれば有効にしたい…!
こちらの対処法については、引き続き調査したいと思います。

 

以上、React Native の「@react-native-community/geolocation」ライブラリを使って、現在の位置情報の緯度経度を取得する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)