Maintenant, j'ai désactivé la liaison ici afin de ne pas avoir tous ces avertissements et erreurs concernant le style de code.
Bien sûr, vous pouvez ajuster votre code pour suivre ce style,
c'est une préférence personnelle à la fin.
Maintenant, ce que je veux faire ici, c'est que je veux vous montrer comment vous pouvez bien sûr changer le code,
mais aussi comment nous pourrions ajouter une fonctionnalité native dans une telle application React Native vanilla.
Donc, pour cela, je vais d'abord simplifier beaucoup cette application
de départ, je vais simplement me débarrasser de tout ce contenu ici et ajouter simplement un style de base configuré ici avec
flex one, justifier le centre de contenu et aligner les éléments centre pour centrer mon contenu sur l'écran.
Débarrassez-vous de cette chose ici et
de toutes ces importations ici, je veux utiliser la feuille de style, je veux utiliser la vue et je veux utiliser
le bouton parce que ce que je veux ajouter est la fonctionnalité de sélection d'image.
Alors là, je reviens ma
vue et mon bouton et sur le bouton, je dis prendre une image puis dans onPress,
je veux ouvrir le sélecteur d'image.
Maintenant, comment pouvons-nous ajouter cela?
Maintenant qu'il s'agit d'un projet React Native sans expo en aucune façon, nous ne pouvons pas facilement utiliser les API expo ici.
Il existe en fait un moyen de les utiliser et j'y reviendrai plus tard dans ce
module, mais vous devrez configurer quelques éléments. Donc, ce que nous pouvons faire à la
place, c'est que nous pouvons faire quelque chose que vous ferez beaucoup si vous
travaillez avec une application React Native vanille, nous recherchons par exemple le sélecteur d'image React Native pour trouver
un package qui nous aide à cela, par exemple exemple celui-ci,
le package de sélecteur d'image React Native et maintenant nous pouvons l'installer car maintenant nous pouvons apporter n'importe quel package tiers,
qu'il ajoute ou non des fonctionnalités natives dans votre application. Auparavant, avec expo, cela n'était pas vraiment possible, vous
ne pouviez apporter que des packages tiers qui n'utilisaient pas les fonctionnalités des appareils natifs,
maintenant vous n'avez aucune restriction.
Alors maintenant,
nous pouvons ajouter ceci et ici nous pouvons l'installer en suivant les instructions d'installation
ici, donc en revenant dans notre projet et en y exécutant npm install --save, puis ici c'est le sélecteur d'image
React Native, comme ceci. Soit dit en passant, vous pouvez continuer à exécuter
ce processus ici et vous devriez le faire pour que le code change une fois que vous avez enregistré vos fichiers soient récupérés et envoyés à vos appareils.
Attendons donc que cette installation se termine maintenant.
Maintenant, c'est fait,
cela
a pris un certain temps et maintenant nous devons
l'installer et la bonne chose est que ce package est
très facile à installer, vous ne devez exécuter que cette commande
ici - Lien React Native, sélecteur d'image React Native.
Alors lancez ceci dans
votre projet, comme ça et vous devriez être bon.
Maintenant, je dirai qu'il existe des packages tiers qui demandent plus d'efforts, cela
dépend vraiment du package. Pour expo, c'était évidemment
très facile, vous venez d'exécuter expo install, c'était très rapide, n'a pas pris autant de
temps et vous n'avez pas eu besoin de faire autre chose.
Ici, vous devez exécuter une commande supplémentaire, mais
bien sûr, ce n'est
pas trop mal, mais encore une fois, je dirai que tous les packages ne
prennent pas en charge cette commande, certains packages nécessitent beaucoup plus de travail de câblage manuel, un travail manuel où vous
devez réellement plonger dans le Dossiers Android et iOS pour commencer à travailler sur certains fichiers de configuration.
C'est ce que la commande React Native link a fait pour vous, par exemple sur Android si vous
plongez dans le dossier d'application et là, source puis dans le dossier source dans build gradle, vous verrez que là,
cette ligne a été ajoutée.
Ce n'était pas là depuis
le début, cela a été ajouté par la commande React
Native link et pour certains packages, vous devez ajouter ces entrées manuellement,
de nombreux packages prennent en charge la commande link et avec des versions plus récentes de React Native,
certains packages même prend en charge la liaison automatique où cette liaison sera effectuée automatiquement une fois l'installation terminée, mais
tous les packages n'ont pas cette prise en charge, c'est donc quelque chose à savoir.
Dans les coulisses, beaucoup de configuration a été modifiée. Avec cela, nous pouvons maintenant utiliser
ce package, encore une fois comme indiqué dans leurs documents afin que nous puissions ajouter
cette importation ici, ici, puis également ajouter la fonction de sélection d'image ici peut-être et connecter cela à notre bouton et maintenant ici, le sélecteur
d'image fonctionne un peu différemment de l'expo.
Ici, nous appelons sélecteur d'images montrer sélecteur d'images avec des options que nous pouvons configurer, les
options sont configurées comme décrit ici ou décrites dans la documentation en général et ici, je vais juste saisir tout ce code
ici, comme ceci, le copier dans l'image de sélection fonction, débarrassez-vous de cet appel d'état défini, nous ne sommes pas
dans un composant basé sur une classe,
donc ce n'est pas quelque chose
que nous pouvons faire, à la place ici dans le
bloc else je vais simplement consigner l'URI de
réponse qui devrait être le chemin de l'image qui a
été prise,
puis nous avons quelques gestionnaires pour différents scénarios ici et avec cela, voyons si cela fonctionne.
Si nous
enregistrons cela, il devrait
normalement être reconstruit ici, mais en raison de notre nouveau package installé, je quitterai ce processus et réexécuterez run-android
react-native ici maintenant dans mon terminal intégré dans Visual Studio Code et donc,
dans ce dossier de projet et maintenant cela fera réapparaître ce serveur de développement et, plus important encore, il relancera également l'application sur
l'émulateur afin que nous espérons pouvoir le voir là-bas et tester le sélecteur d'images ici.
Attendons donc que cela se termine, que ce processus de construction se termine.
Maintenant, voici l'application qui arrive et si j'appuie dessus, j'obtiens cette superposition, je peux cliquer sur prendre une photo et
rien ne se passe.
La raison en est l'absence d'autorisations et c'est le travail manuel que je voulais dire. Nous devons aller dans
le dossier Android, là dans la source, principale, AndroidManifest qui configure l'application Android et là vous
devez ajouter une nouvelle autorisation. Vous pouvez copier cette autorisation Internet dont vous
aurez toujours besoin pour que l'application Android communique avec le serveur de développement et là, vous pouvez maintenant ajouter l'autorisation
de caméra que vous devez ajouter pour que cette application puisse accéder à la caméra de l'appareil, sinon cela n'est pas pris en charge.
Alors maintenant, nous pouvons réexécuter ce processus, reconstruire l'application et nous assurer que nous prenons ce nouveau paramètre en
compte et avec cela, nous devrions maintenant pouvoir l'ouvrir.
Encore une fois, c'est une configuration supplémentaire que nous n'avions pas besoin de faire dans le monde de l'expo bien sûr.
Sur iOS, vous devez également faire quelque chose de similaire pendant la reconstruction. Là, si vous allez
dans votre fichier RNWithoutExpo, vous trouverez les informations. fichier plist et dans ce fichier,
vous devez également ajouter une entrée pour demander cette autorisation.
Vous devez ajouter une nouvelle clé ici après une paire clé-valeur existante, la position exacte n'a pas d'importance
et vous trouverez les instructions détaillées sur les documents officiels de ce paquet, sous
le document installé, si vous cliquez là, vous Je trouverai des instructions concernant les autorisations
à définir pour
Android, j'en ai également oublié une, nous devons également définir cette autorisation de
stockage externe, alors laissez-moi revenir au manifeste Android, ajoutez-la ici et réexécutez-la sur Android et iOS
, vous devez définir ces clés ici. Vous copiez donc tout
cela, puis revenez à l'info. fichier plist que je vous ai montré ici et maintenant vous pouvez ajouter ces paires clé-valeur ici.
Avec
cela, vérifions l'application sur Android et si je clique maintenant
sur prendre une photo, maintenant on me demande la permission ici, cela se
produit maintenant automatiquement, le package le fait pour nous
et maintenant, la caméra s'ouvre. Donc, cela fonctionne maintenant,
mais comme vous l'avez vu avec un peu de configuration supplémentaire et en suivant les instructions sur
les documents officiels et chaque paquet aura ses propres instructions. Certains packages ne prennent même pas en charge la
commande
link, vous devez en faire
encore plus, d'autres packages nécessitent moins de travail. Vous avez plus de flexibilité mais donc aussi plus de devoirs.
Cependant, c'est ainsi que vous pouvez apporter des packages tiers qui exploitent les fonctionnalités de l'appareil natif à une application React Native uniquement pour
le code de votre composant que vous écrivez, c'est le même code que nous avons
écrit tout au long du cours - mêmes composants,
même logique, même manière de la façon dont vous créez votre application. Vous pouvez créer les mêmes dossiers, vous pouvez ajouter
la navigation React, que tout ne change pas.