【ReactNative】react-native-mapsで地図の表示領域が描画される度に領域情報を取得する

# 概要
先日[【ReactNative】react-native-mapsを導入する](https://qiita.com/nekoniki/items/61bfa4245c88a5ca0408)という記事を書いて、`react-native-maps`を導入しましたが、今回はちょっとした応用編です。

最もオーソドックスな使い方としては、下記の実装例のように`Map`に初期表示位置として`initialRegion`を指定し、その周辺に表示したい情報を`Marker`でプロットしていくのがオーソドックスな使い方だと思います。

```tsx:TestMap.tsx
import React from 'react';
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }

    <MapView initialRegion={initialRegion} >
        <Marker coordinate={coordinate} />
    </MapView>
}
```

しかしながら、プロットする情報が膨大な数の場合は表示領域から近いものに絞って表示するかと思います。
そうなると必要になってくるのが、ユーザ操作によって表示領域が変更された時に、新たに描画される表示領域情報を取得する処理です。
今回は、`onRegionChangeComplete`を使った方法を紹介します。

# バージョン情報
```
"react-native": "0.61.5",
"react-native-maps": "^0.26.1",
"native-base": "^2.13.8",
```

# onRegionChangeComplete()を使って表示領域を取得する
`onRegionChangeComplete`は、ユーザ操作(もしくはそれ以外の処理)で`Mapview`の表示領域が変更されるたびに呼ばれます。
下記のようにして`Region`型で再表示後の表示領域情報を受け取ります。

```tsx:TestMap.tsx
import React from 'react';
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

// 表示領域変更イベントを検知
handleRegionChange = (region : Region) => {
  console.log(region);
  // -> {"latitude": xxx, "latitudeDelta": xxx, "longitude": xxx, "longitudeDelta": xxx}
};

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }

    <MapView initialRegion={initialRegion} 
             onRegionChangeComplete={handleRegionChange} >
        <Marker coordinate={coordinate} />
    </MapView>
}
```

# おまけ：getMapBoundaries()でNorthEast,SouthWestを取得
基本的に`Region`で事足りるかと思いますが、表示領域の北東(NorthEast)と南西(SouthWest)を取得するバージョンも記載します。
上記のコードに対して`MapView`の`ref`を保持しておき、表示領域が切り替わったタイミングで`getMapBoundaries()`を実行します。
`getMapBoundaries()`は非同期ですので注意が必要です。

```tsx:TestMap.tsx
import React from 'react';
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

// 表示領域変更イベントを検知
handleRegionChange = async (region : Region) => {
  console.log(region);
  // -> {"latitude": xxx, "latitudeDelta": xxx, "longitude": xxx, "longitudeDelta": xxx}
  const mapBoundaries = await this.map.getMapBoundaries();
  console.log(mapBoundaries);
  // -> {"northEast": {"latitude": xxx, "longitude": xxx}, "southWest": {"latitude": xxx, "longitude": xxx}}
};

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }

    <MapView initialRegion={initialRegion} 
             ref={ref => {this.map = ref}}
             onRegionChangeComplete={handleRegionChange} >
        <Marker coordinate={coordinate} />
    </MapView>
}
```

# おわりに
`MapView`の表示領域が変わるたびに、その表示範囲に近いデータを都度取得してプロットするのはよくあるパターンだと思います。
覚えてしまえばなんてことない方法ですが、備忘として残しておきます。