فریم‌ورک React Native

در پارسی‌مپ پشتیبانی از توسعه نقشه تعاملی در فریم‌ورک React Native با استفاده از پکیج مربوط به @react-native-mapbox-gl/maps فراهم شده است. جهت نمایش نقشه با سبک‌های گوناگون می‌توان از مجموعه سبک‌های پارسی‌مپ استفاده کرد. در مراحل بعدی نحوه بکارگیری سرویس‌های پارسی‌مپ در فریم‌ورک React Native با استفاده از SDK مربوط به @react-native-mapbox-gl/maps شرح داده می‌شود.

پیش‌نیازها

نصب نسخه 0.59.9 React Native

پیشنهاد می‌شود که از نسخه 0.59.9 استفاده شود و دلیل آن این است که React Native در نسخه 0.60.0 به بعد به دلیل پشتیبانی از Androidx بسیاری از libraryها از جمله پکیج @react-native-mapbox-gl/maps هنوز به صورت رسمی با نگارش جدید Androidx سازگار نبوده از این‌رو libraryهای نوشته شده برای React Native قابل انطباق نبوده و مانع از اجرای برنامه در محیط آندروید شود. این نسخه از فریم‌ورک React Native آخرین نسخه‌ای بود که به صورت stable قادر به پشتیبانی از استانداردهای قبل از Androidx است.

react-native init ParsimapReactNativeMapboxGL --version 0.59.9

نصب پکیج @react-native-mapbox-gl/maps

npm install @react-native-mapbox-gl/maps

فراخوانی در پلت‌فرم‌ها

توسط دستور link کتابخانه مربوط به @react-native-mapbox-gl/maps در فضای کد مربوط به دو پلت‌فرم Android و IOS به صورت خودکار لینک شده و توابع و کلاس‌های مربوط به آن فراخوانی گریده و در دسترس خواهد بود. همچنین می‌توان با مشاهده مستندات راه‌اندازی برای پلت‌فرم Android یا IOS از تغییرات اعمال شده در کدها آگاه شده و یا به صورت دستی تغییرات را برای فراخوانی پکیج اعمال نمود.

react-native link

نمونه فایل package.json

پس از اعمال مراحل فوق فایل package.json ایجاد شده در دایرکتوری اصلی پروژه ممکن است به صورت زیر باشد.

{
  "name": "ParsimapReactNativeMapboxGL",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-mapbox-gl/maps": "^7.0.1",
    "react": "16.8.3",
    "react-native": "0.59.9"
  },
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/runtime": "7.5.5",
    "babel-jest": "24.9.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

فراخوانی ماژول‌ها

ماژول‌های مربوط به ReactJS و MapBoxGL به منظور افزودن نقشه در پروژه باید فراخوانی شوند.

import React, { Component } from "react";
import MapboxGL from "@react-native-mapbox-gl/maps";

تنظیمات اولیه

برای ایجاد نقشه ابتدا لازم است که accessToken با مقدار معتبر parsimap.accessToken که تایل‌های پارسی‌مپ برای نمایش نیاز به آن دارد، مقداردهی شود.

MapboxGL.setAccessToken("parsimap.accessToken");

بکارگیری نقشه

نقشه با استفاده از سرویس تایل پارسی‌مپ در فریم‌ورک React Native توسط قطعه کدزیر ایجاد می‌گردد. سبک استفاده شده Street از نوع Vector است. برای اطلاع بیشتر از بکارگیری سبک‌های نقشه و استفاده از سایر سبک‌ها از جمله Gray، Map و Sat می‌توان به بخش سبک‌های تایل نقشه مراجعه کرد.

export default class App extends Component {
  render() {
    return (
      <MapboxGL.MapView
        style={{ flex: 1 }}
        styleURL={"https://www.parsimap.com/styles/street.json"}
      >
        <MapboxGL.Camera
          centerCoordinate={[51.41, 35.7575]}
          zoomLevel={18}
        ></MapboxGL.Camera>
      </MapboxGL.MapView>
    );
  }
}

کدنهائی

در این بخش تمامی کدهای شرح داده شده در قبل به طور کامل قرار دارد همچنین با دریافت پروژه نمونه، Source به همراه نمونه اجراء شده قابل استفاده خواهد بود. جهت مشاهده راهنمای کامل بکارگیری پکیج و امکانات نقشه می‌توان به مستندات @react-native-mapbox-gl/maps مراجعه کرد.

import React, { Component } from "react";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("parsimap.accessToken");

export default class App extends Component {
  render() {
    return (
      <MapboxGL.MapView
        style={{ flex: 1 }}
        styleURL={"https://www.parsimap.com/styles/street.json"}
      >
        <MapboxGL.Camera
          centerCoordinate={[51.41, 35.7575]}
          zoomLevel={18}
        ></MapboxGL.Camera>
      </MapboxGL.MapView>
    );
  }
}