React Nativeで現在位置情報を取得する方法

2019-12-08

react-native-geolocation-serviceライブラリを使ってReact Nativeで現在位置を取得する方法について調べてみましょう。

概要

このブログポストではReact Nativeで現在位置情報を取得する方法について調べてみます。位置情報を取得するため、使うライブラリはreact-native-geolocation-serviceで、下記のリンクで詳細情報を見ることができます。

ブログを作成しながら作ったソースコードがあります。ソースコードを確認したい方は、下記のリンクを参考してください。

例題ソースコードは下記の内応が適用されています。詳しく知りたい方は下記のリンクを参考してください。

react-native-geolocation-serviceインストール

下記のコマンドでreact-native-geolocation-serviceをインストールしてください。

npm install --save react-native-geolocation-service

ライブラリのリンク

インストールしたライブラいをReact Nativeプロジェクトへリンクする必要があります。

0.60以上

ios/[project name]/Podfileを開いて下記の内容を追加します。

...
pod 'react-native-geolocation', path: '../node_modules/@react-native-community/geolocation'
...

追加したら、下記のコマンドでreact-native-geolocation-serviceをReact Nativeプロジェクトへリンクします。

cd ios
pod install
cd ..

0.59以下

React Nativeのバージョン0.59以下の場合、公式サイトを参考してリンクしてください。

アンドロイド権限設定

アンドロイドで位置情報を使うため、android/app/src/main/AndroidManifest.xmlファイルを開いて下記のように修正します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.reactnativegeolocationserviceexample">

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

    <application

使い方

react-native-geolocationライブラリを使って、下記のように位置情報を取得することができます。

現在の位置情報を取得

現在位置情報を取得するためには、下記のコードを使います。

Geolocation.getCurrentPosition(
    (position) => {
        console.log(position);
    },
    (error) => {
        // See error code charts below.
        console.log(error.code, error.message);
    },
    { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

現在位置情報を画面に表示する例題は下記です。

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Label = Styled.Text`
    font-size: 24px;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const CurrentPosition = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({
          latitude,
          longitude,
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  }, []);

  return (
    <Container>
      {location ? (
        <>
          <Label>Latitude: {location.latitude}</Label>
          <Label>Latitude: {location.longitude}</Label>
        </>
      ) : (
        <Label>Loading...</Label>
      )}
    </Container>
  );
};

export default CurrentPosition;

上のソースコードの結果が次になります。

react-native-geolocation-serviceユーザの現在位置情報

ユーザの位置情報追跡

react-native-geolocation-serviceを使ってユーザの現在位置情報の取得以外にも、ユーザの位置情報を追跡することができます。

ユーザの位置情報追跡にするためのソースコードは下記になります。

_watchId = Geolocation.watchPosition(
  position => {
    const {latitude, longitude} = position.coords;
    setLocation({latitude, longitude});
  },
  error => {
    console.log(error);
  },
  {
    enableHighAccuracy: true,
    distanceFilter: 0,
    interval: 5000,
    fastestInterval: 2000,
  },
);

ユーザの位置情報の追跡が終わったら、下記のコードを使って終了します。

if (_watchId !== null) {
  Geolocation.clearWatch(_watchId);
}

ユーザの位置情報を追跡する全体ソースコードは次になります。

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Label = Styled.Text`
    font-size: 24px;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const WatchLocation = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);
  let _watchId: number;

  useEffect(() => {
    _watchId = Geolocation.watchPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({latitude, longitude});
      },
      error => {
        console.log(error);
      },
      {
        enableHighAccuracy: true,
        distanceFilter: 0,
        interval: 5000,
        fastestInterval: 2000,
      },
    );

    return () => {
      if (_watchId !== null) {
        Geolocation.clearWatch(_watchId);
      }
    };
  }, []);

  return (
    <Container>
      {location ? (
        <>
          <Label>Latitude: {location.latitude}</Label>
          <Label>Latitude: {location.longitude}</Label>
        </>
      ) : (
        <Label>Loading...</Label>
      )}
    </Container>
  );
};

export default WatchLocation;

シミュレーターでユーザの位置情報を追跡するためには次の画面ようにDebug > LocationメニューでCity Run, City Bicycle Ride, Freeway Drive中で1つのメニューを選択したら位置情報が更新されることが確認できます。

react-native-geolocation-serviceユーザの位置情報追跡

完了

これでreact-native-geolocation-serviceを使ってユーザの位置情報を取得する方法について見てみました。また、watchPositionを使ってユーザの位置情報を追跡する方法もみてみました。

Buy me a coffeeBuy me a coffee
Posts