استفاده از نقشه در React Native

React Native یکی از محبوب‌ترین فریمورک‌های توسعه اپلیکیشن‌های موبایل است که به توسعه‌دهندگان این امکان را می‌دهد که برنامه‌های iOS و Android را با استفاده از زبان برنامه نویسی جاوااسکریپت و تکنولوژی React توسعه دهند. در بسیاری از اپلیکیشن‌های موبایل، استفاده از نقشه‌ها یک نیاز ضروری است. در این مقاله، نحوه‌ی استفاده از نقشه در React Native را بررسی خواهیم کرد.

استفاده از نقشه در React Native

جهت پیاده سازی و استفاده از نقشه در React Native نیاز است که مراحل زیر را با دقت طی کنید تا به خروجی درست و اصولی برسید.

روش های پیاده سازی

1. استفاده از Google map
2. استفاده از Open layer با web view با استفاده از use dom

پیش‌نیازها

برای پیاده‌سازی نقشه در React Native به موارد زیر نیاز داریم:

1. نصب و پیکربندی   React Native
2. نصب کتابخانه کتابخانه ها
3. دریافت کلید API از Google Maps (در صورت نیاز)

ایجاد پروژه

یک پوشه خالی ایجاد کنید و با Terminal یا CMD باز کنید و درون آن دستور زیر را برای ایجاد یک پروژه خالی ری اکت نیتیو وارد کنید:

npx create-expo-app@latest --template blank-typescript.

نصب و راه‌اندازی react-native-maps

1. کتابخانهreact-native-maps  یکی از محبوب‌ترین گزینه‌ها برای کار با نقشه در React Native است که پیشنهاد اصلی خود Expo نیز می‌باشد و قابلیت های فراوانی برای نمایش نقشه به ما می‌دهد، برای نصب این کتابخانه، دستور زیر را اجرا کنید:

npx expo install react-native-maps

2. پروژه را با دستور npm start اجرا کنید و با تلفن هوشمند خود در نرم افزار  expo go ، QR code نمایش داده شده در ترمینال را اسکن کنید. سپس پروژه را در یک Code editor مانند VS Code باز کنید و وارد فایل App.tsx شوید .

3. در بخش اول MapView را از کتابخانه نصب شده import کنید :

import MapView from "react-native-maps";

4. تک های موجود در return را حذف کنید و مقادیر زیر را قرار دهید:

<View style={styles.container}>
      <MapView style={styles.map} />
      <StatusBar style="auto" />
</View>

5. مقادیر درون StyleSheet.create را حذف کرده و موارد زیر را جایگزین آن کنید:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});

اگر این موارد را به درستی رعایت کنید ، می‌توانید به راحتی نقشه را بر روی تلفن همراه خود ببینید.

افزودن قابلیت موقعیت‌یابی کاربر

با اجرای دستور زیر ، نیازمندی مربوط به موقعیت یابی را نصب کنید:

npx expo install expo-location

سپس کد زیر را جایگزین کد قبلی کنید:

import { StatusBar } from "expo-status-bar";
import { useEffect, useRef, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import * as Location from "expo-location";

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

export default function App() {
  const [location, setLocation] = useState<Location.LocationObject | null>(
    null
  );
  const mapRef = useRef<MapView>(null);
  useEffect(() => {
    async function getCurrentLocation() {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.log("Permission to access location was denied");
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      if (location.coords) {
        mapRef.current?.fitToCoordinates([location.coords]);
      }
    }

    getCurrentLocation();
  }, []);
  return (
    <View style={styles.container}>
      <MapView style={styles.map} ref={mapRef}>
        {location && <Marker coordinate={location?.coords} />}
      </MapView>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});

در این کد ، یک state برای ذخیره سازی موقعیت فعلی کاربر ایجاد می‌کنیم ، سپس از یک useRef برای استفاده از قابلیت های کامپوننت MapView استفاده می‌کنیم . درون useEffect یک تابع تعریف می‌کنیم تا بتوانیم از async , await استفاده کنیم ، درون تابع کد مربوط به مجوز دسترسی به لوکیشین را می‌نویسیم و در صورت تایید شدن توسط کاربر آن را درون setState قرار می‌دهیم و در نهایت با استفاده از mapRef که بالاتر تعریف کرده بودیم ، نقشه را در موقعیت کاربر زوم می‌کنیم.

کامپوننت Marker را از react-native-maps وارد می‌کنیم :

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

درون کامپوننت MapView از یک Marker بصورت شرطی استفاده می‌کنیم ، در صورتی که کاربر اجازه دسترسی داد ، مارکر موقعیت دقیق کاربر را نمایش دهد:

<MapView style={styles.map} ref={mapRef}>
        {location && <Marker coordinate={location.coords} />}
</MapView>

برای استفاده از قابلیت های بیشتر ، پیشنهاد سوبلز ، استفاده از مستندات رسمی react-native می‌باشد.

استفاده از روش use dom

شاید برای شما سوال باشد که چرا باید از این روش استفاده کرد؟

Use dom یک قابلیت جدید در Expo است که به شما اجازه می‌دهد ، یک کامپوننت React را درون React native بصورت مستقیم استفاده کنید و بتوانید بین آنها تعامل ایجاد کنید ، در نهایت React native آن را به یک web view تبدیل می‌کند و به نمایش می‌گذارد.

این ویژگی به توسعه دهده این امکان را می‌دهد که از تمام قابلیت ها و کتابخانه هایی که در بستر وب وجود داشته است ، به راحتی بتواند در React native با یک Performance بسیار خوب استفاده کند.

نکته: در صورتی که هیچ راهی برای استفاده از کامپوننت های خود React native وجود نداشت از این روش بهره‌مند شوید.

اما در خصوص استفاده از Map با این روش ، می‌توان به کتابخانه هایی همچون Open layer دسترسی پیدا کرد و همچنین از SDK های موجود در پلتفرم مسیریابی نشان و API های آن بهره‌مند شد .

نصب نیازمندی ها

npx expo install react-native-webview

npx expo install @expo/metro-runtime react-dom react-native-web

npm install ol

پس از نصب نیازمندی ها نیاز دارید محتوای درون فایل App.tsx را پاک کنید و موارد جدید را جایگزین آنها کنید اما قبل از آن یک کامپوننت با قابلیت use dom ایجاد کنید :

1. یک پوشه به نام components ایجاد کنید.
2. درون آن یک فایل با نام tsx بسازید.
3. یک کامپوننت ری اکت معمولی ایجاد کنید
4. در خط اول آن قبل از هر چیزی مقدار “use dom”; را قرار دهید.

"use dom";
import React from "react";

const mapDom = () => {
  return (
    <div
      style={{
        height: "100px",
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      Map
    </div>
  );
};

export default mapDom;

حال برای استفاده از این کامپوننت درون App.tsx را به مقدار زیر تغییر دهید:

import { StyleSheet, View } from "react-native";

import MapDom from "./components/mapDom";

export default function App() {
  return (
    <View style={styles.container}>
      <MapDom />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

نکته : اگر در نمایش اختلال ایجاد شد یا به خطا برخوردید ، پروژه را متوقف کنید و دوباره start کنید

در ادامه برای استفاده از Open layer وارد کامپوننت MapDom شوید و محتوای آن را ویرایش کنید:

"use dom";

import React, { useEffect, useRef } from "react";

import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import "ol/ol.css";
function MapView() {
  const mapRef = useRef<Map | null>(null);
  useEffect(() => {
    mapRef.current = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
  }, []);
  return <div id="map" style={{ position: "absolute", inset: 0 }} />;
}

export default MapView;

در این حالت شما نقشه را در صفحه نمایش خود مشاهده خواهید کرد.

برای ایجاد تعامل بین کامپوننت والد و فرزند از مستندات رسمی ری‌اکت نیتیو استفاده کنید.

نتیجه‌گیری

در این مقاله همراه با سوبلز، نحوه‌ی استفاده از نقشه در React Native را بررسی کردیم. از نصب و پیکربندی react-native-maps گرفته تا نمایش نقشه و افزودن موقعیت‌یابی کاربر ، همه مراحل به‌طور کامل توضیح داده شدند. با این دانش، می‌توانید قابلیت‌های پیشرفته‌تری مانند نمایش مسیرها، نمایش چندین مارکر، یا تعامل با داده‌های مکان‌یابی را به اپلیکیشن خود اضافه کنید.