Maintenant, en plus de configurer un nouveau projet à partir de zéro avec React Native CLI ou avec l'expo CLI, puis de
choisir le flux de travail nu,
vous pouvez même convertir un projet géré en un projet de flux de travail nu React Native et c'est plutôt cool parce que cela signifie que vous pouvez obtenir
tout les fonctionnalités de commodité du flux de travail géré pendant le développement et une
fois que vous avez terminé par exemple ou une fois que vous avez besoin d'un certain package tiers qui intègre certaines fonctionnalités que vous n'avez
pas intégrées dans expo et dont vous avez absolument besoin, dans un tel cas, vous pouvez basculez toujours et
vous n'avez pas à reconstruire l'application à partir de zéro et à créer un nouveau projet
et à copier votre code.
Comment? Eh bien dans votre projet et c'est la fonctionnalité
native de l'appareil, le grand projet de lieux que nous construisons plus tôt dans le cours où nous pouvons ajouter
des lieux, où nous utilisons bien sûr l'emplacement, les cartes, la caméra, SQLite, où nous utilisons tous ces éléments choses, là dans ce projet, vous
pouvez simplement exécuter expo eject et cela transforme votre projet en un projet de workflow géré non-expo.
Important cependant, il n'y a pas de retour en arrière,
bien sûr, vous pouvez copier votre dossier et faire une copie de sauvegarde et l'enregistrer ou si vous utilisez git, vous
pouvez bien sûr revenir à un commit précédent mais si vous n'avez pas enregistré votre projet, une fois que vous l'éjectez,
vous ne pouvez pas le
retransformer, alors soyez conscient de cela.
Vous devriez créer un tout nouveau projet géré par expo et copier tout votre code si vous vouliez
revenir en arrière.
Donc, ici, si vous exécutez expo éjecter, on devrait vous demander en fait quel type de projet vous voulez
éjecter et ici, j'ai finalement deux options. Maintenant, les options que vous voyez ici en passant peuvent différer au
fil du temps, mais ici, les deux options que j'ai sont kit nu et expo. Le kit Expo est obsolète, c'est essentiellement ce
que nous avions avant d'avoir le flux de travail nu, vous ne devriez donc pas vraiment passer à cela,
vous pouvez plutôt passer à nu ici, ce qui signifie
simplement que maintenant cela sera transformé en un projet React Native, comme s'il serait créé avec React Native
CLI sans le wrapper expo mais il sera préconfiguré comme mentionné ici
sur la page react-native-unimodules qui est une sorte de ce package dont expo a besoin pour
exposer toutes ces API expo à un application non expo. Il va donc préconfigurer toutes ces choses au cours de chaque action
afin que vous n'ayez pas à le faire,
vous obtenez donc une application React Native plus pour ainsi dire. Donc, si je clique sur Entrée ici et maintenant
important, vous ne pouvez pas revenir en arrière une fois cela terminé, vous pouvez choisir un nom pour l'écran
d'accueil et je choisirai de bons endroits ici par exemple, appuyez sur Entrée, nommez maintenant mon Android Studio et Xcode projets rn-guide mais
cela ne dépend que de vous et maintenant cela fera son travail.
Il transforme le projet, il ajoute
un dossier Android et comme je suis sur macOS, il ajoute également un dossier iOS. Bien sûr, sur Windows et Linux, cela ne
fonctionnera pas car là, puisque vous devez maintenant le construire localement, il
ne peut pas construire
d'applications iOS et il préconfigure tout et installe quelques dépendances afin que vous puissiez utiliser votre code existant
et tous les packages expo que vous avez déjà installés dans cette configuration nue, donc
il ne se contente pas de configurer tous
les trucs unimodules ici, il s'assure également que tous les packages que vous utilisez déjà, comme expo location ou expo
SQLite, que ces packages également travail. Alors maintenant, cela peut prendre un
certain temps, alors attendons que cela se termine et ici c'est fait et vous voyez que cela me dit en fait qu'il a généralement fait
son travail mais qu'il y avait deux packages qui nécessitent une configuration manuelle.
Vous pouvez simplement cliquer sur ces liens pour obtenir des instructions sur ce que vous
devez y faire, c'est le sélecteur d'images expo et le package de cartes React Native où vous devez effectuer une installation
manuelle pour le terminer.
Donc, ici, sur la page du sélecteur
d'images expo, ce que nous devons faire en fin de compte, c'est que nous devons exécuter l'installation du port dans le dossier
iOS,
nous devons donc faire toutes les choses après l'installation du package. Donc, dans le dossier du projet, je vais naviguer dans
iOS et exécuter l'installation du port, le port est comme npm pour iOS, il installe certaines dépendances dont iOS a
besoin pour fonctionner correctement, donc c'est ce qui se passe maintenant et une fois cela fait, nous allons également devez ajouter cette
entrée ici au manifeste Android, c'est aussi quelque chose que nous devrons faire.
Nous devons donc aller dans le dossier Android, le dossier de l'application là-bas et dans le dossier
source, le AndroidManifest, puis comme décrit ici, ajoutez-le à l'intérieur des balises d'application.
Voici donc l'application et là-dedans, nous devons ajouter cette entrée d'activité ici, comme ceci, c'est obligatoire.
Maintenant que je suis déjà là, vous verrez également que ce fichier manifeste a également été configuré
d'une certaine
manière, il inclut toutes les autorisations et bien sûr, vous ne voulez pas le faire, vous voulez seulement demander les
autorisations vous avez vraiment besoin.
Donc, comme il est dit ici, supprimez toutes les autorisations dont votre application n'a pas besoin et, par exemple, mon
application de démonstration ici ne devrait avoir besoin que de l'autorisation d'accès à la
localisation que je déplacerai là-haut et de la caméra bien sûr que je déplacerai là-haut ainsi que l'autorisation d'écriture sur le stockage externe, qui
devrait également être requise.
Il doit s'agir de toutes les autorisations et vous pouvez vérifier tous les packages tiers ou tous
les packages API expo que vous utilisez pour vous assurer que vous ne manquez aucune autorisation.
Avec cela, je vais en fait commenter toutes ces autorisations ici et aussi toutes ces autorisations et nous allons
le tester pour voir si cela fonctionne. Donc, avec cela, la configuration du package de sélection d'image est terminée. Désormais, les cartes React Native
doivent également être configurées et nous pouvons y plonger dans les instructions d'installation.
Maintenant, cette commande d'installation npm, qui s'est déjà produite, mais maintenant ce que nous devons
faire, c'est que nous devons exécuter le lien React Native React Native maps. Donc, remontons simplement d'un niveau dans
le dossier racine du projet et exécutons le lien React Native React Native maps et
cela va maintenant tout
lier, assurez-vous que tout fonctionne correctement, que tout est configuré correctement et
que vous devrez toujours faire du manuel trucs, toutes ces choses ici ne devraient pas être obligatoires,
cela devrait être fait avec un lien heureusement mais sur Android, vous devez vous assurer que vous ajoutez cette entrée ici, cette
entrée
de métadonnées dans votre clé d'application dans le AndroidManifest.
Donc, ici à l'intérieur de l'application, nous pouvons ajouter cette entrée et là, vous devez placer votre clé API
Google Maps.
Maintenant, je l'ai dans le
dossier env si vous vous en souvenez, donc je vais juste saisir cette clé et l'ajouter ici, remplacer votre clé
API Google Maps ici avec elle et
aussi important, si vous allez sur la page API Google Maps, vous avez besoin pour activer ce SDK de cartes pour Android pour
votre projet,
c'est important sinon cela ne fonctionnera pas. Pour iOS, vous n'avez rien à faire de spécial,
sauf si vous souhaitez y utiliser Google Maps, auquel cas vous devez suivre les instructions données dans les instructions React Native
maps ici pour savoir comment utiliser Google Maps sur iOS mais pour
Android vous vous devez absolument activer le SDK Google Maps pour l'API Android ici. Pour activer cette API, vous pouvez accéder à la plateforme Google
Cloud ici pour le projet sur lequel vous avez travaillé plus tôt lorsque vous configurez cette clé
d'API, etc., puis ici, sous API et services, vous pouvez accéder à la bibliothèque qui vous amène à une
bibliothèque de toutes les API Google et du SDK de cartes pour Android,
vous devez l'activer.
Vous devrez également configurer le SDK de cartes pour iOS si vous souhaitez utiliser Google Maps sur iOS que je
n'utiliserai pas ici cependant.
Maintenant, il devrait déjà être activé
ici, mais assurez-vous qu'il l'est. Donc, au cas où il ne
serait pas activé, faites-le.
Avec cela, cela devrait également être configuré de telle sorte
que cela fonctionne et maintenant si nous exécutons run-android react-native, l'application que nous avons construite dans un module précédent avec le flux de travail géré
par expo devrait désormais fonctionner, maintenant sans le flux de travail géré par expo sans le client expo utilisé sur le simulateur ou
le vrai appareil, mais au lieu de cela construire localement avec Android Studio ou bien sûr aussi avec iOS si vous voulez
l'utiliser et donc de la même manière que vous le feriez dans un projet créé par React Native CLI mais maintenant
après avoir été éjecté
du flux de travail géré, ce qui signifie bien sûr que tout ce code a été écrit dans le
flux de travail géré et pourtant je l'exécute maintenant dans le flux de travail non géré, ce qui est plutôt agréable.
Attendons donc que cela se termine et voyons si cette application fonctionne comme il se doit.
Cela arrive sur l'émulateur Android ici, qui est l'émulateur que je veux utiliser pour les tests parce
que là, je peux utiliser la caméra de l'émulateur pour les tests et encore, juste pour le souligner, cela n'utilise plus
l'application client expo, nous
ne pourrions pas non plus '' t scannez un code-barres ici car il n'y a
pas de code-barres à scanner, c'est maintenant vraiment une application construite avec Android Studio et poussée vers notre application.
Alors, voici notre application et essayons maintenant d'ajouter un nouvel
endroit ici, testez, prenez une image, autorisez l'accès à la caméra bien sûr, puis prenez
cette image oui
recadrez-la, choisissez un
emplacement sur la carte peut-être,
voici la carte à venir, cet emplacement me semble
bon, enregistrez-le, enregistrez le lieu, nous y
sommes
et laissez-moi maintenant fermer cette application.
Là, vous voyez également que c'est vraiment une application
autonome installée, si j'ouvre le tiroir des applications ici sur l'appareil, ici sur le simulateur, c'est cette
grande appli que vous voyez ici.
Donc, si je lance cela, cela relance maintenant l'application dans laquelle nous venons de travailler et il y a notre place car
elle était stockée dans
le stockage local, l'image était évidemment stockée sur le système de fichiers sinon
nous ne la verrions pas et cela fonctionne comme avant mais maintenant pas à l'intérieur du client expo mais en tant
qu'application
autonome sans enveloppe expo, utilisant toujours certaines des API expo et des packages expo à l'aide de ce package unimodules
qui est automatiquement ajouté et configuré au flux de travail nu que nous avons d'autre part obtenu
à l'aide de l'éjection.
Donc, beaucoup de choses sympas se passent là-bas.