React-Native и Apple Maps

В настоящее время я занимаюсь созданием приложения React-Native, которое использует карту, и я хотел быстро приступить к работе, поэтому я решил использовать Apple Maps, которые не требуют дополнительной настройки и ключа API. Забегая вперед, я покажу вам, как реализовать карту в вашем приложении React-Native.

Если у вас еще нет открытого и готового к работе проекта, я бы посоветовал пройти это краткое руководство, чтобы начать свой проект. После того, как шаблон будет готов, мы установим react-native-maps и свяжем его.

npm i react-native-maps --save
react-native link

Давайте создадим новый компонент с именем Map.js

Внутри Map.js мы импортируем библиотеку react-native-maps вверху. Таблица стилей и размеры, импортированные из react-native, находятся в следующей части.

import React, { Component } from 'react'
import MapView from 'react-native-maps
import { StyleSheet, Dimensions, View } from 'react-native

Что мы хотим сделать дальше, так это создать таблицу стилей для карты. Мы собираемся получить размеры устройства, на котором мы работаем, и передать их в таблицу стилей. Это позволит карте заполнить размеры экрана.

let {height, width} = Dimensions.get('window')
const styles = StyleSheet.create({
 container: {
   height: height,
   width: width,
 },
 map: {
   ...StyleSheet.absoluteFillObject,
 },

Следующая часть - создание карты. Мы создадим View и поместим внутри него MapView, содержащий реквизиты для нашего style и initialRegion, который будет вашим начальным местоположением на карте.

export default Map extends Component{
render(){
  return(
    <View style={styles.container}>
      <MapView
         style={styles.map}
         initialRegion={{
           latitude: 37.78825,
           longitude: -122.4324,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
         }}
         />
    </View>
    )
  }
}

Отсюда давайте импортируем наш компонент в наш App.js

import React, { Component } from 'react';
import Map from './components/Map'
export default class App extends Component {
  render(){
    return <Map/>
  }
}

Затем вы запустите react-native run-ios, и это откроет симулятор для просмотра нашей недавно добавленной карты!

Для документации и дополнительной помощи, пожалуйста, просмотрите документацию для react-native и react-native-maps