• React Native Maps Example 1
  • React Native Maps Example 2
  • React Native Maps Example 3
  • React Native Maps Example 4

React Native Maps Example

Reagire nativa Mappe Esempio per un componente mappa costruita da Airbnb che può utilizzare Mappe Apple / Google Maps su iOS Maps e Google su Android.

https://github.com/airbnb/react-native-maps

1. MapView Eventi
Il componente MapView ed i suoi componenti figlio hanno diversi eventi che è possibile abbonarsi.

2. Regione Monitoraggio / Località

3. Cambiare programmazione Regione
Si può cambiare la posizione MapView con rif e metodi dei componenti, oppure passando in una regione prop aggiornati. I metodi dei componenti permetteranno una animare ad una determinata posizione come API nativa potrebbe.

4. Cambiare lo stile della mappa

5. arbitraria Reagire Visualizzazioni come marcatori

6. Uso del MapView con l'API animata
Il componente MapView può essere fatto funzionare con l'API animata, avendo l'intera regione prop essere dichiarato come valore animato. Questo permette di animare lo zoom e la posizione dei MapView insieme ad altri gesti, dando una piacevole sensazione. Inoltre, vista Marker possono utilizzare l'API animato per aumentare l'effetto.

7. Polygon Creator

8. Altri Overlay
Finora, Cerchio, Poligono, e Polilinea sono a disposizione per passare da bambini al componente MapView.

9. Marcatori predefinite
marcatori di default saranno resi a meno che non sia specificato un indicatore personalizzato. Si può regolare il colore a scelta del marcatore predefinito utilizzando il prop pinColor.

10. Personalizzato callout
Chiamate alla marcatori possono essere completamente arbitrario reagiscono vista, simile ai marcatori. Di conseguenza, essi possono interagire con come qualsiasi altro punto di vista.
Inoltre, è possibile ripiegare il comportamento standard di solo avere un titolo / descrizione tramite del marcatore titolo e nella descrizione oggetti di scena.
vista callout personalizzati possono essere l'intero bolla tooltip, o semplicemente il contenuto all'interno della bolla di default del sistema.

11. Marcatori immagine-based
Marcatori possono essere personalizzati usando solo immagini e specificati utilizzando il puntello immagine.

12. Draggable Marcatori
Marcatori sono trascinabili, ed emettono eventi di trascinamento continuo per modificare altri UI durante boccate.

13. Modalità Lite (Android)
Attivare la modalità lite su Android con il puntello liteMode. Ideale quando si ha più mappe in una vista o ScrollView.

14. Regione Animata
Il MapView può accettare un valore MapView.AnimatedRegion come la sua regione prop. Questo permette di utilizzare l'API animate per controllare il centro e lo zoom della mappa.

15. Animated indicatore di posizione
I marcatori possono anche accettare un valore AnimatedRegion come una coordinata.

16. Prendere Istantanea di carta

17. Zoom per Marcatori specificati
Passare una serie di identificatori marcatori per avere la mappa ri-messa a fuoco.

18. Zoom per coordinate specificate
Passare una matrice di coordinate di focalizzare una regione mappa su dette coordinate.

Categoria : Librerie e demo

Ricerche associate