Мапи

У мобільного застосунку можна показувати мапу з маркерами. Реалізує таку логіку пакет react-native-maps.

terminal

npx expo install react-native-maps

Для роботи мап від google на деплої необхідно зарєструвати і додати відповідні ключі. Інструкція тут

Після завершення встановлення стануть доступними такі компоненти:

• MapView - відповідає за рендеринг мапи

• Marker - відповідає за рендеринг маркера

Відтворіть цей код на телефоні, або емуляторі iOS або Android.

Резервний код

App.js

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

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

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

Основні налаштування (пропси) компоненту MapView:

• region - місце на мапі

• mapType - налаштування типу мапи

• minZoomLevel - зум мапи

• onMapReady - функція, яка виконається після завантаження мапи

• onRegionChange - функція, яка спрацьовує після зміни координат регіону

Основні налаштування (пропси) компоненту Marker:

• title - назва маркера

• coordinate - координати маркера

• description - опис маркера

Можна на мапі розмістити безліч маркерів. Головне розмістити маркети всередині компонента MapView. Для їх генерації можна використати метод map.

Резервний код

App.js

import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import MapView, { Marker } from "react-native-maps";

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          latitude: 50.450958,
          longitude: 30.5232558,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        mapType="standard"
        minZoomLevel={15}
        onMapReady={() => console.log("Map is ready")}
        onRegionChange={() => console.log("Region change")}
      >
        <Marker
          title="Maidan Nezalezhnosti"
          coordinate={{ latitude: 50.450958, longitude: 30.5232558 }}
          description="Kyiv Center"
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  map: {
    // width: "100%",
    // height: "100%",
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

Документація:

React Native Maps

MapView

Інструкція щодо ключів Google