React ネイティブ アプリでマップとジオロケーション機能を統合

エクスポロケーション

博覧会のマネージドプロジェクトでは、[expo-locationは、許可、位置追跡、およびボックスからジオコーディングを処理する合理化されたAPIを提供します。 開発プロセスを簡素化し、開発プロセスを制限しますが、深層プラットフォームの統合を必要としないプロトタイプやアプリのカスタマイズへのアクセスを制限します。

その他の注目すべきライブラリ

• []react-native-google-places[]:Google Places APIから自動補完と場所の詳細を提供します。
• []react-native-box-gl[]:カスタムマップスタイルとオフラインタイル(積極的な維持)を提供します。
• [] リアクトネイティブマップスーパークラスター: 効率的なマーカークラスタを追加して、反応ネイティブマップに。

詳細な比較については、【]の公式ドキュメントを参照してください。 リアクトネイティブマップ]と[]]のリアクトネイティブジオロケーションサービスを参照してください。

アプリ内のマップの実装

インストールとセットアップ

ライブラリのインストールとプラットフォーム固有の依存関係の設定から始めましょう。

npm install react-native-maps
cd ios && pod install

Android で Google マップを使用している場合は、API キーを [ に追加します。

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

GoogleマップでiOSの場合、同じキーをまたはに追加します。 また、Apple Mapsは、任意のAPIキーなしでボックスから動作します。

基本マップコンポーネント

コアコンポーネントは で、初期表示領域を定義する [ prop が指定されます。

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

と]は、ズームレベルを制御する。 より大きな値は、より広い領域を示しています。

マーカーとコールアウトの追加

マーカーはマップ上の場所をピンポイントします。 それらは、タップしたときにコールアウトとして示されるタイトルと説明を含めることができます。

import MapView, { Marker, Callout } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

カスタムマーカーとクラスタリング

デフォルトのマーカーピンを[]を使ってカスタムビューに置き換えます。

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

数百万人以上のマーカーを扱う場合、クラスタリングを使用してパフォーマンスを向上させます。 [のようなライブラリは、グループ化とズームレベル管理を自動的に処理します。

デッサンの形: ポリラインおよびポリゴン

ルートや境界線については、[と[]のコンポーネントを使用します。

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

地図をアニメーション化

または を使用してカメラをプログラム的に移動します。

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

ユーザアクセスアクセス

反応ネイティブジオロケーションサービスのインストール

npm install react-native-geolocation-service
cd ios && pod install

ライブラリは、両方のプラットフォームで許可設定を必要とします。 Android 6 +の場合、 または のような専用のライブラリを使用してランタイムの許可を要求します。 iOS では、 または ]] のキー [] を含んでいます。

単一位置を取得する

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

連続した場所の追跡

リアルタイムの動き(例えば、フィットネストラッキング)には、[ を使用します。

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

背景の場所

背景(例、配送追跡)であっても、位置の更新が必要なアプリでは、追加の手順が必要です。

• [iOS:]] ]背景モード]の機能を有効にし、「Location Update」をチェックします。 ]をバッテリーに優しいアップデートに使用してください。
• Android:]] 永続的な通知でフォアグラウンドサービスを使用します。 ライブラリ[]]]は、[]および[ユーティリティを提供します。

常に、バックグラウンドトラッキングを有効にする前に、適切な[[権限を取得し、ユーザーがアプリストアガイドラインに従うように明確に通知します。

最善の慣行を処理する権限

ユーザーが位置が必要な理由について、コンテキストを持たせた後のアクセス許可リクエスト。 のようなライブラリを使用して、クロスプラットフォームの権限を管理します。

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

慎重にハンドルを処理します。例えば、場所が必要な理由を説明し、システム設定にユーザーを導くアラートが表示されます。

エラー処理とエッジケース

• []権限が拒否されました:[]]] デフォルト領域に戻り、設定から位置を有効にするためにユーザーをプロンプトに表示します。
• [] 位置が利用できなくなった:[]]] 屋内でGPS信号が失われた場合、キャッシュされたデータを受け入れるを使用します。 「位置...」インジケータが表示されます。
• []ネットワークエラー:[]]]インターネットがないとマップの読み込みが失敗する可能性があります。プレースホルダーまたはオフラインメッセージのレンダリング。
• [:]]] 合理的な[(例えば、15秒)を設定し、ユーザーに通知します。

パフォーマンスの最適化

不要なリレンダーを削減

• とオブジェクトを記憶し、すべての状態の変化で再レンダリングを防止します。
• カスタムマーカーのような子コンポーネントの を使用します。
• のコールバックで、場所の更新をスロットルまたは非バウンスします。

地図の更新を制限する

• ユーザが最小距離を移動するときにのみ更新するために[を使用します。
• マーカーセットが変更されていない場合は、マーカーデータをに保つことでマップ全体を再レンダリングしないでください。

クラスタリングの管理

マーカーを多く表示する際には、 を使って、現在のビューポートで表示されるマーカーだけをクラーザしたりロードしたりできます。

プラットフォーム固有の検討

スマートフォン

• Apple MapsはAPIキーを必要としませんが、Googleマップは3Dビルや屋内ナビゲーションなどの機能が欠如しています。
• iOS 上で Google マップ の場合、API キーを に追加し、Google マップ SDK をリンクする必要があります。
• ローカル化のためにを設定してください。

アンドロイド

• Googleマップは、マニフェストで有効なAPIキーが必要です。 Google Cloud Consoleから入手し、「Android用のマップSDK」を有効にします。
• 特定のデバイスでは、モックの場所が干渉する可能性がある) 検出します。
• 背景位置のフォアグラウンドサービスを使用します。アプリは、ライブを維持するために通知を表示する必要があります。

試験場所の特徴

• シミュレータを使用してマップとモックの場所をテストします。Xcodeでは、座標を「Simulate Location」で設定できます。
• Android Studio では、GPS データを送信するために「拡張制御」を使用します。
• 実際のデバイスでGPSの精度、権限ダイアログ、およびバックグラウンドトラッキングの動作を確認することができます。
• や などのツールで、単位のテストをパーミッションロジックと UI テストに書き込みます。

外部リソース

• []react-native-maps GitHub Repository[]]
• [] 再アクティブ・ネイティブ・ジオロケーション・サービス GitHub リポジトリ
• Googleマッププラットフォームドキュメント[]
• Apple MapKit ドキュメント[]

コンテンツ

React Nativeアプリのマップと地理位置情報を統合することで、静的インターフェースを動的で位置情報認識できる体験に変えます。 反応性地図や反応性位置情報サービスなどの堅牢なライブラリを活用することで、開発者は機能が豊富なマップ、リアルタイムのユーザートラッキング、シームレスなアクセス許可処理を追加できます。 プラットフォームの差、パフォーマンスの最適化、およびユーザーのプライバシーに注意を払って、洗練された信頼性の高いアプリケーションを保証します。 ここに説明されたパターンとベストプラクティスでは、ユーザーは、その機能がユーザーを満足させる機能を備えています。