スマホ機能

位置情報と地図

react-native-maps

地図を表示するにはreact-native-mapsパッケージを使用します。react-native-mapsが提供するMapViewコンポーネントを使うことでアプリの画面に地図を表示できます。

    const latitude = 35.6809591;   // 緯度
    const longitude = 139.7673068; // 経度
    return (
      <MapView
        // initialRegionで初期位置を指定する
        // latitudeDeltaとlongitudeDeltaは表示領域の広さの指定
        initialRegion={{
          latitude, longitude,
          latitudeDelta: 0.0461, longitudeDelta: 0.0210,
        }}
        style={styles.map}
      />
    );

react-native-mapsでは地図上に表示するマーカーなどのコンポーネントも提供されています。以下のようにMapViewの子要素としてMarkerを記述することでマーカーが表示されます。

      <MapView
        initialRegion={{
          latitude, longitude,
          latitudeDelta: 0.0461, longitudeDelta: 0.0210,
        }}
        style={styles.map}
      >
        <Marker
          coordinate={{ latitude, longitude }}
          title="東京駅"
          description="東京都千代田区丸の内一丁目"
        />
      </MapView>

expo-location

アプリから位置情報のような「センシティブな情報（ここでは個人の特定につながるような情報と考えていただければいいと思います）」を取得する際にはユーザーによる許可が必要になります。インストールしたアプリを起動したら「○○に△△を許可しますか？」のような確認メッセージが表示された経験があると思います。

位置情報を取得するにはexpo-locationパッケージ（デフォルトでインストールされています）を使いますが、このパッケージでは位置情報を取得するメソッドに加え、「位置情報を取得する許可を申請する」メソッドも用意されています（許可申請の本体はexpo-permissionsというパッケージで行われています）

許可が必要な処理の基本形は以下のようになります。

許可申請のメソッドを呼び出す。
「許可する」と返された場合は本体の処理を行う。

expo-locationを使用した位置情報取得の場合は以下のようになります。なお、許可申請・位置取得ともに非同期処理となるため、例のようにasyncを付けた非同期関数でawaitを使うようにするとプログラムが簡潔になります。

  componentDidMount() {
    // コンポーネントがマウントされたら位置情報を取得する
    this.getLocation();
  }
  
  // 位置情報の取得。asyncを付けておくと関数内でawaitが使える
  async getLocation() {
    // まず取得許可を得る
    const res = await Location.requestPermissionsAsync();
    // 許可が得られなければ関数を終了する
    if (res.status !== 'granted') {
      return;
    }
  
    // 位置情報取得本体。取得した内容はstateに設定する（renderが呼ばれる）
    const location = await Location.getCurrentPositionAsync();
    this.setState({coords: location.coords});
  }