React Native Mapbox GL

نسخه جاری v8.1.0.rc3

دستورالعمل‌های ارائه یافته به شما این امکان را می‌دهد که نقشه Mapbox GL را در فریم‌ورک react-native پیاده کنید.

شروع سریع

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

ماژول Node.js

نصب پکیج‌های npm

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

وارد کردن ماژول نقشه

کد زیر را در فایلی که می‌خواهید نقشه را نمایش دهید، اضافه کنید.

import React from 'react'
import { StyleSheet, View } from 'react-native'
import MapboxGL from '@react-native-mapbox-gl/maps'

MapboxGL.setAccessToken('')

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

const App = () => (
  <View style={styles.container}>
    <MapboxGL.MapView
      style={styles.map}
      styleURL="http://api.parsimap.io/styles/parsimap-streets-v11?key=PMI_MAP_TOKEN"
    >
      <MapboxGL.Camera centerCoordinate={[51.41, 35.7575]} zoomLevel={6} />
    </MapboxGL.MapView>
  </View>
)

export default App

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