Aujourd’hui, nous allons intégrer Google Maps dans une application React Native étape par étape, en utilisant le populaire package React Native Maps.
Il existe deux façons d’intégrer Google Maps dans une application React Native:
1. create-react-native-app cli
2. react-native-cli
Il y a quelques différences entre ces deux façons que je voudrais clarifier.
react-native-cli est convivial pour les développeurs et donne la flexibilité d’utiliser des composants natifs. Mais avec cela, vous devez configurer chaque petit élément de l’application.
En dehors de cela, si vous souhaitez tester votre application, vous devez utiliser l’appareil réel ou utiliser des simulateurs pour iOS et Android.
LIRE AUSSI: Comment installer React Native sur Ubuntu
Vous pouvez générer beaucoup de bogues lors de l’installation de divers packages rpm et de leur configuration.
create-react-native-app, Il s’agit d’un environnement sans tracas pour développer des applications plus rapidement. Vous n’avez besoin d’aucun appareil (pas même de simulateurs) pour exécuter et tester les applications.
Il vous suffit de développer le code et de tester à l’aide de l’application expo conçue pour Android et iOS. Vous avez juste besoin du QR Code généré par votre application lorsque vous exécutez avec npm start.
Il est très facile d’intégrer de tels modules dans des bases de code natives comme Java ou Swift.
LIRE AUSSI: Comment générer un APK d’une application React Native ?
Je dirais une chose après avoir lu tout le didacticiel, vous pouvez également intégrer facilement google maps dans une application React Native.
Vous apprendrez également à créer une toute nouvelle application React Native à partir de zéro. Alors, sans plus tarder, commençons.
Conditions préalables
Nous supposons que vous avez au moins une connaissance de base ou intermédiaire de JavaScript, React & React Native.
Commençons par create-react-native-app.
De quoi avez-vous besoin pour intégrer google maps dans une application React Native?
1. Éditeur de texte ou IDE (nous utilisons Visual Studio Code)
2. Node JS (comme toujours nécessaire pour installer des packages et d’autres choses)
3. create-react-native-app, (Un outil de ligne de commande CLI pour installer React Native sur votre système.)
4. Expo, (En savoir plus sur Expo)
Comment installer React Native sur votre système local? Installons React Native sur notre système. Ouvrez votre ligne de commande dans VS Code en utilisant Ctrl + ~ sous Windows ou allez dans le terminal dans le menu et cliquez sur Ajouter un nouveau terminal.
Exécutez la commande:
> npm install -g create-react-native-app
npm: (Node Package Manager, qui gère tout votre package de l’installation à la suppression).
install: Install est utilisé pour donner une commande à NPM pour installer un package. Vous pouvez également utiliser -I à la place de ceci.
-g: Cela indique ou dit à NPM d’installer create-react-native-app globalement sur le système. Cela signifie qu’il sera disponible après cette commande sur tous vos systèmes et que vous pouvez créer une application native react dans n’importe quel répertoire.
create-react-native-app: Un outil conçu par les développeurs de React natve pour faciliter le démarrage d’une nouvelle application mobile. Il génère tout le code bolierplate nécessaire pour démarrer immédiatement le processus de développement de votre application.
Alors, passons à l’étape suivante.
Nous allons créer une application qui intègre google maps. Quel serait le nom de notre application? Appelons-le « localisation-finder ».
Exécutez cette commande dans votre terminal:
create-react-native-app locationfinder
Vous verrez l’installation de nombreuses dépendances et l’installation sur votre système prendra un certain temps, comme indiqué sur l’image.
Lorsque vous appuyez sur Entrée dans la ligne de commande. Il vous demandera ce que vous voulez: un modèle vierge ou un modèle à onglets.
Appuyez à nouveau sur Entrée pour choisir un modèle d’application vierge.
Après cela, il vous demandera le nom de l’application et vous montrera également le slug.
Ne vous inquiétez pas, tapez le nom que vous voulez.
Vous pouvez aller prendre une tasse de café jusqu’à la fin de l’installation. Cela prend généralement quelques minutes.
Alors maintenant, enfin, votre application est créée. Si vous souhaitez exécuter et tester l’installation, tapez dans la ligne de commande:
> cd locationfinder (pour entrer dans le dossier de l’application)
> npm start
Vous pouvez tester l’application avec Expo en scannant le code QR généré par la commande. Sinon, vous pouvez utiliser le simulateur pour iOS et l’émulateur pour Android.
Pour les utiliser, appuyez sur «i» pour iOS ou sur «a» pour Android.
Vous pouvez utiliser n’importe quel émulateur tiers comme Gennymotion.
Il s’agit d’un projet d’implémentation de Map.
Les dépendances sont:
1. «expo»: «³².0.0»,
2. «react»: «16.5.0»,
3. «react-native»: «³².0.0»
4. « react-native-maps »: « 0.22.0 »
Par défaut, Expo utilise les cartes react-native-maps d’Airbnb. Actuellement, Expo SDK utilise la version 0.22.0. Parce que celui-ci est intégré à create-react-native-app et expo.
Vous pouvez voir une structure de dossier similaire dans le code VS comme indiqué ci-dessous:
Comme je l’ai dit plus tôt, nous allons utiliser Expo SDK et react-native-maps est l’une des fonctionnalités intégrées pour intégrer Google Maps dans Expo SDK.
Vous n’avez pas besoin d’installer et de configurer les cartes react-native-maps pour Android et iOS séparément, ce que vous devez faire dans react-native-cli.
Intégration de google Maps dans une application React Native
Maintenant que vous avez installé toutes les dépendances requises, vous pouvez importer MapView dans votre application React Native. Vous devez apporter les modifications suivantes dans le fichier app.js:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
export default
class App extends React.Component {
render() {
return (
<MapView
style={{ flex: 1 }}
provider={PROVIDER_GOOGLE}
showsUserLocation
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421}}
/>
);
}
}
Désormais, Google Maps est intégré dans votre application mobile. Il existe plusieurs méthodes que vous pouvez utiliser pour le rendre plus intuitif.
La latitude et la longitude sont utilisées pour indiquer la position de l’objet. latitudeDelta et longitudeDelta sont utilisées pour fournir les options de zoom sur la carte.
Je l’ai essayé sur Android et cela fonctionne bien. Vous pouvez essayer sur un appareil iPhone et me le faire savoir dans la section commentaires. N’hésitez pas à publier une capture d’écran de votre application pour la montrer.
Intégration de google Maps dans une application React Native avec react-native-cli (Alternative)
Étape 1: Installation de react-native-cli et création de l’application
Commençons à créer la même application à partir de zéro en utilisant react-native-cli. Vous devez suivre la même méthode pour installer react-native-cli. Dans le terminal, exécutez:
> npm install -g react-native-cli
Cela prend un peu de temps. Après cela, exécutez une autre commande pour créer l’application:
> react-native init locationfinder
Cela prendra également un certain temps lors de l’installation. Après l’installation, accédez au dossier en utilisant > cd locationfinder.
Vous pouvez exécuter cette application uniquement sur un simulateur Android ou iOS à l’aide de ces commandes pour iOS, React-native run-ios et pour Android React-Native Run-Android.
Étape 2: Installez le package react-native-maps
react-native-maps créée par Airbnb. Il est open source et n’importe qui peut l’utiliser pour accéder à Google Maps. Pour l’installer dans l’application:
> locationfinder/npm install –save react-native-maps
Une fois l’installation terminée. Vous devez lier ce package à votre application actuelle afin de pouvoir utiliser les méthodes du package dans votre application.
Alors, configurons les fichiers de carte pour Android et iOS à la fois.
Configurer React-Native-Maps pour Android
Nous décrivons les étapes en détail, mais je vous suggère de vérifier également la documentation officielle. Vous avez juste besoin de faire de petits changements dans certains fichiers, mais les autres sont gérés automatiquement par react-native-cli.
Vous devez entrer dans le dossier Android. Là, vous devez modifier le fichier AndroidManifest.xml. Dans ce fichier, vous devez configurer la clé API Google Maps.
Vous pouvez trouver ce fichier dans android/app/src/main/AndroidManifest.xml.
<application>
<meta-data
android:name=”com.google.android.geo.API_KEY”
android:value=”Your Google maps API Key Here”
/>
</application>
Assurez-vous que les métadonnées de l’application se trouvent sous la balise d’application. Remplacez la valeur android: par la valeur de la clé API.
Pour trouver les clés d’API Google, vous devez accéder au SDK cartographique de Google pour Android, comme indiqué sur l’image. Vous pouvez également y voir les instructions.
Après cela, accédez à la plate-forme cloud de Google comme indiqué sur l’image:
Cliquez sur Maps SDK pour Android, puis entrez-y. Vous verrez l’écran suivant où vous pouvez trouver les informations d’identification. Cliquez dessus et générez la clé API comme indiqué ci-dessous.
Modifier le fichier MainApplication.java que vous pouvez également trouver dans le dossier Android. L’arborescence des dossiers est montrée dans l’image. Là, vous devez importer le package react-native-maps:
import com.airbnb.android.react.maps.MapsPackage;
Une dernière chose que vous devez changer dans ce fichier. Ajouter un nouveau MapsPackage () dans la fonction comme indiqué ci-dessous
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MapsPackage()
);
}
Enfin, tout est fait pour Android. Vous devez maintenant reconstruire l’application. Pour ce faire, utilisez la commande react-native run-android.
Configurer React Native Maps pour iOS
Nous devons ajouter un Podfile dans iOS pour implémenter les Cocoapods. Pour configurer le PodFile, vous devez aller dans le dossier iOS, créer un fichier nommé Podfile et coller le code fourni ci-dessous. Il y a quelques choses que vous devez changer dans ce PodFile.
Tout d’abord, supprimez le commentaire # platform: ios, « 9.0 » en le supprimant. Ensuite, vous devez remplacer la cible « _VOTRE_PROJECT_TARGET_ » par le nom de votre application. Ensuite, décommentez toutes les dépendances react-native-maps.
Une fois toutes ces modifications effectuées, enregistrez le fichier. Ensuite, accédez à la ligne de commande et entrez dans le dossier ios en utilisant cd ios.
Dans ce dossier, vous devez exécuter une autre installation de pod. Cela installera tous les fichiers nécessaires.
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target '_YOUR_PROJECT_TARGET_' do
rn_path = '../node_modules/react-native'
rn_maps_path = '../node_modules/react-native-maps'
# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
pod 'React', path: rn_path, subspecs: [
'Core',
'CxxBridge',
'DevSupport',
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
]
# React Native third party dependencies podspecs
pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
# If you are using React Native <0.54, you will get the following error:
# "The name of the given podspec `GLog` doesn't match the expected one `glog`"
# Use the following line instead:
#pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
# react-native-maps dependencies
pod 'react-native-maps', path: rn_maps_path
# pod 'react-native-google-maps', path: rn_maps_path # Uncomment this line if you want to support GoogleMaps on iOS
# pod 'GoogleMaps' # Uncomment this line if you want to support GoogleMaps on iOS
# pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS
end
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == 'react-native-google-maps'
target.build_configurations.each do |config|
config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
end
end
if target.name == "React"
target.remove_from_project
end
end
end
Maintenant, nous devons activer Google Maps pour iOS. Pour ce faire, nous devons intégrer notre clé API dans le fichier AppDelegate.m.
Nous sommes maintenant prêts à implémenter les cartes dans iOS. Alors faisons-le. Collez simplement le code ci-dessous et reconstruisez votre application.
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
export default class App extends React.Component {
render() {
return (
<MapView
style={{ flex: 1 }}
provider={PROVIDER_GOOGLE}
showsUserLocation
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
}
Conclusion
Dans ce didacticiel React Native, nous avons appris comment ajouter google maps dans une application React Native.
J’ai essayé d’expliquer presque tous les détails sur la façon de mettre en œuvre Google Maps dans les applications React native. J’espère que cet article vous plaira et qu’il vous aidera dans le développement de votre application.
Si vous êtes bloqué quelque part, veuillez commenter ci-dessous et n’hésitez pas à partager cet article. Cela pourrait aider quelqu’un d’autre.
Leave a Comment