タイトル通り、アプリから現在の緯度経度を取得する方法についてです。
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
の項目に NSLocationWhenInUseUsageDescription
と NSLocationAlwaysAndWhenInUseUsageDescription
を追加してください。
なお、アプリが 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
で管理すると後々扱いやすいと思います。
…が、上記のサンプルコードを見てわかる通り、現在オプションが未指定です…。
enableHighAccuracy
を true
に設定して、出来る限り高精度の位置情報を取得したかったのですが、何故か設定するとエラーになってしまいました…。
別に高精度の位置情報を取得する必要はないのでこれでも問題はないのですが、できれば有効にしたい…!
こちらの対処法については、引き続き調査したいと思います。
以上、React Native の「@react-native-community/geolocation」ライブラリを使って、現在の位置情報の緯度経度を取得する方法についてでした。
ご参考になれば幸いです。