Maintenant, cette application React Native est construite à l'aide de l'expo comme vous le savez. Maintenant, comme je l'ai mentionné au
début du cours, il s'agit toujours d'une application React Native standard, donc expo tout
comme un wrapper supplémentaire qui offre de nombreuses fonctionnalités pratiques qui facilitent la construction de cette
application et c'est
comme un shell, une application dans laquelle notre application s'exécute, ce qui rend donc plus facile et surtout
plus facile à configurer de nombreuses fonctionnalités natives de l'appareil.
Maintenant, comme je l'ai également mentionné au début de ce module, dans un module séparé, je vais vous montrer comment vous
pouvez ajouter des fonctionnalités de périphérique natif à des applications non-expo, mais
en fait, si vous n'avez pas de raison de ne pas utiliser expo, je le ferais nous vous recommandons fortement
de l'utiliser, car expo si vous vérifiez leurs documents, possède de nombreuses fonctionnalités intégrées et de nombreux modules natifs intégrés que vous pouvez utiliser, de sorte que
les fonctionnalités des
appareils natifs vous pouvez facilement ajouter et
vous voyez une liste complète ici en allant aux docs et là à la référence API.
Ici, vous voyez un tas de choses que vous pouvez ajouter à votre application et ce sont principalement
des fonctionnalités d'appareil natives qui sont toutes fournies par expo,
donc vous devrez toujours installer quelque chose mais vous n'aurez pas besoin de manuel configuration et
comme vous le verrez dans la création d'une application sans module expo, il y a pas mal de configuration que vous
devrez peut-être faire si vous ajoutez des modules natifs, des packages de fonctionnalités de périphérique natif à une application non
expo, donc c'est vraiment adorable ici.
Maintenant, je veux utiliser un appareil photo et en effet il y a un package d'appareil photo que vous pouvez ajouter.
Nous pourrions en fait l'utiliser pour accéder à la caméra de
l'appareil, c'est
parfait si vous devez créer une application qui a vraiment besoin de faire beaucoup avec la caméra, si
vous construisez comme Instagram, comme une application où vous voulez vraiment contrôler la l'écran de la caméra
et le flux de la caméra, ce n'est pas ce que je veux faire ici.
Je veux utiliser l'appareil photo ordinaire de l'appareil,
je n'ai besoin de rien de
spécial là-bas, je me soucie simplement d'obtenir une image que l'utilisateur peut prendre
et pour cela, nous obtenons en fait le sélecteur d'image. Cela nous permet également d'utiliser l'appareil photo de l'appareil, mais cela
ne nous permet pas de personnaliser autant l'appareil photo, mais
c'est exactement ce dont j'ai besoin ici.
Maintenant, tout ce que nous devons faire pour y accéder est d'exécuter cette commande expo install, qui est en fait comme
npm install, juste pour s'assurer qu'elle installe une version du paquet qui est garantie de fonctionner avec
notre version spécifique de expo que nous utilisons dans cette application. Je vais donc simplement copier cette commande puis dans
ce projet, nous pouvons exécuter expo install expo image picker. Appuyez sur Entrée et cela installera maintenant ce package avec
npm install dans les coulisses, c'est ce qu'il fait ici, juste
dans une version qui correspond à notre SDK expo où nous utilisons dans ce projet et cela
va maintenant l'installer et c'est tout,
aucune configuration supplémentaire n'est nécessaire.
Nous n'avons pas besoin de toucher à un
fichier de configuration, nous n'avons rien
d'autre à faire, cela nous permet d'utiliser cette fonctionnalité et c'est
bien sûr très facile.
Avec cela, nous pouvons commencer à l'utiliser et je veux commencer à l'utiliser ici sur le nouvel écran de lieu où
nous avons le droit de saisie
de texte, là, je veux également ajouter maintenant un bouton sur lequel l'utilisateur peut appuyer pour ouvrir la caméra.
Maintenant, bien sûr, pour toutes ces fonctionnalités natives de l'appareil et aussi pour les nombreuses fonctionnalités que nous ne pouvons bien
sûr pas couvrir dans ce cours, vous avez toujours appris comment vous pouvez les utiliser ici dans vos documents
officiels d'exposition, là, vous avez appris quelles méthodes et propriétés vous pouvez accéder vous y trouverez de courts exemples pour de nombreux packages,
c'est donc certainement quelque chose que vous devriez vérifier. Pour l'appareil photo, bien sûr, vous pouvez
également suivre, car nous allons l'utiliser ensemble ici pour prendre une photo.
Je vais en fait créer un nouveau composant, ImageSelector. js, vous pouvez le nommer comme vous voulez
dans lequel j'importe React de React et où j'importe une vue et un bouton et aussi un texte de React Native et aussi la feuille
de style bien sûr parce que je veux styler mon sélecteur d'images.
Appelons le sélecteur d'images, j'aime ça, mon composant sélecteur d'images.
Donc ici, le sélecteur d'images est alors un composant régulier bien sûr où je veux
configurer certains styles avec la feuille de style. créer une méthode et où à la fin j'exporte le composant sélecteur d'image.
Maintenant, que va-t-il se passer ici dans le composant sélecteur d'images? À la fin, ici, je vais retourner
une vue qui devrait ensuite contenir une autre vue où je peux afficher un aperçu de l'image.
Donc, là-dedans, je veux avoir le composant texte où je dis qu'aucune image n'a encore été sélectionnée, ce qui est mon contenu de
secours si aucune image n'a encore été sélectionnée, sinon
je vais afficher une image, donc nous
devrons également importer le composant image à partir de React Native et en dessous de cette vue, je
vais ajouter un bouton avec un titre de prise d'image où je veux définir la couleur sur Couleurs. primaire, donc pour cela, assurez-vous
d'importer ces couleurs constantes et sur une pression, je veux ouvrir
la caméra et l'afficher à l'utilisateur. Je vais donc également ajouter une constante ici, prendre le gestionnaire d'image et c'est une
fonction qui devrait ouvrir la
caméra et c'est la fonction que je lierai à ce bouton.
Maintenant, un certain style serait bien. Sur cette vue extérieure, je vais ajouter un style de sélecteur d'images,
sur cette vue intérieure qui affiche un
aperçu de mon image, je vais ajouter un style de prévisualisation d'image. Ensuite, ce texte ici pourrait également être stylisé, mais je n'ai en fait besoin
d'aucun style spécial là-bas et bien sûr, je veux également afficher une image ici et je vais bientôt ajouter une condition if / else
pour afficher uniquement le texte ou
l'image et ce devrait également obtenir un style d'image peut-être juste.
Alors maintenant, nous avons trois identificateurs de style que nous devons ajouter à
la feuille de style, nous obtenons le sélecteur d'image
pour le composant global, obtenons l'aperçu de l'image et ensuite nous avons l'image elle-même.
L'image elle-même est simple, là je veux juste définir une largeur de 100% et une hauteur de 100% pour
qu'elle prenne toute la largeur et la hauteur du conteneur d'aperçu environnant.
Ce conteneur peut alors bien sûr être configuré comme vous le souhaitez, je vais
lui donner une largeur de 100% et une hauteur de 200 pixels mais bien sûr vous
pouvez changer cela ou le calculer dynamiquement avec l'API dimensions. Ajoutez une marge au bas de 10
et assurez-vous que mon texte d'espace réservé serait effectivement centré en ajoutant justifier le centre de contenu
et aligner le centre des éléments ici et en
plus de cela, j'ajouterai également une bordure ici avec une couleur de bordure gris clair et une largeur de bordure
de un.
Maintenant, pour le composant sélecteur d'images en général, je vais simplement définir cela pour aligner le centre des éléments
pour vous assurer que tous les éléments sont centrés horizontalement, mais
maintenant nous sommes tous là pour vraiment ouvrir la caméra de l'appareil, non?
Donc, avant de faire quoi que ce soit d'autre ici concernant l'aperçu et ainsi
de suite, assurons-nous qu'ici dans le gestionnaire de prise d'image, nous ouvrons réellement la caméra et pour cela, importons tout comme sélecteur d'image depuis le sélecteur d'image expo, donc à
partir de ce package que vous venez d'installer. Maintenant que j'ai utilisé le sélecteur d'images ici et
aussi pour le composant, nous aurons un conflit de noms, donc je vais nommer ce sélecteur
d'img ici juste pour éviter ce conflit de noms qui autrement causerait des problèmes, changez-le
également ici lors de l'exportation de cours.
Alors maintenant, avec le sélecteur d'images importé ici, nous pouvons l'utiliser ici,
sélecteur d'images et
là, nous pouvons appeler le lancement de la caméra asynchrone.
Vous pouvez également ouvrir la galerie à la place
si vous le souhaitez, mais ici, je vais appeler le lancement de la caméra asynchrone.
Maintenant, cela ouvrira la caméra de l'appareil et la partie asynchrone implique ici qu'il s'agit d'une
opération asynchrone.
En effet, cela renvoie une promesse, ce qui est logique car cela ouvre la caméra et nous
ne savons pas quand l'utilisateur aura
fini de prendre l'image, il enregistrera donc simplement une fonction qu'il devrait exécuter une fois que l'utilisateur aura terminé et
résolu la promesse d'exécuter cette fonction une fois que cela se produit, une fois que l'utilisateur
a terminé ou bien sûr une fois que l'utilisateur annule. Nous pouvons gérer tout cela et le résultat et ainsi de
suite plus tard, pour l'instant voyons si cela fonctionne et pour cela, incluons le composant sélecteur d'images dans le nouvel écran de lieu.
Donc là, nous pouvons importer le sélecteur d'images et ici, bien sûr, nous pouvons utiliser ce nom
parce que nous n'utilisons pas le package de sélecteur d'images ici, l'importer à partir de composants, du composant sélecteur d'images et
ajouter ce sélecteur d'images ici en dessous de notre entrée de texte comme un composant à fermeture automatique comme celui-ci.
Maintenant, si nous enregistrons cela, jetons un coup d'œil. Ici, ce texte et ainsi
de suite, qui n'est pas positionné correctement, nous n'avons pas besoin de nous en soucier pour
le moment, pressons plutôt de prendre l'image et ce que vous verrez, c'est que rien ne se passe mais je reçois un avertissement -
caméra manquante ou autorisation de roulage de la caméra. Sur Android, si je l'essaye, on me demande si je veux accorder des autorisations. J'ai besoin d'appuyer sur autoriser ici et
avec cela, la caméra s'ouvre. Donc c'est bien, ça marche généralement, je peux
l'utiliser, je peux
donc appuyer sur ce bouton puis confirmer l'image que j'ai prise mais sur
iOS ça ne marche pas et pourquoi est-ce le cas? Eh bien sur iOS, nous avons eu une erreur d'autorisation ici
et cela
se produit simplement parce que les autorisations sont importantes mais qu'elles fonctionnent différemment sur iOS et Android.
Sur
Android, vous configurerez également les autorisations à l'avance et puisque nous utilisons cette application expo où expo fournit ce
wrapper, expo fait en fait toutes ces autorisations configurées et nous demande. Pour iOS, le système d'autorisation fonctionne un
peu différemment.
Vous ne le configurez pas vraiment de telle sorte que vous ayez un fichier de configuration dans lequel vous définissez toutes les autorisations à
l'avance
et c'est tout, à la place, vous devez demander la permission au moment de l'exécution.
En passant, dans certaines versions d'Android, vous devriez également le faire maintenant.
Toujours là, expo comme vous le voyez le fait pour vous, donc pour Android, cela fonctionne comme ça, sur iOS
non, vous devez demander à l'utilisateur la permission d'accéder à la caméra et c'est simplement quelque chose que nous devons
faire ici et nous pouvons le faire avec l'aide d'un autre package
expo et c'est le package des autorisations.
Vous devez également l'installer avec cette commande ici dans votre projet afin de pouvoir demander des
autorisations à l'utilisateur.
Alors faisons-le ici dans le projet,
exécutons les autorisations expo install expo qui est à nouveau juste ce wrapper autour de npm install pour installer les autorisations pour
ce projet ou pour installer ce package pour ce projet, puis dans le sélecteur d'images avant d'essayer de lancer le
caméra et en ouvrant la caméra, nous devrons demander des autorisations. Pour cela, je vais ajouter une
nouvelle constante ici, obtenir ou vérifier les autorisations et ceci est une fonction qui
contient une fonction qui utilisera ce package d'autorisations nouvellement ajouté.
Donc ici, j'importe tout en tant qu'autorisations à partir des autorisations expo, donc le
même type d'importation que nous l'avons pour le
sélecteur d'images, puis là, nous pouvons utiliser des autorisations et demander de manière asynchrone.
Encore une fois, c'est une tâche asynchrone qui renvoie une promesse car cela ouvrira une invite et avant que
l'utilisateur n'ait choisi une réponse, rien ne se
passera, donc nous avons une promesse qui se résout ou est rejetée une fois que l'utilisateur a confirmé ou refusé.
Donc, ici, nous devons alors être plus précis sur les autorisations dont
nous avons besoin, alors nous passons quelque chose à demander async et c'est une constante que nous obtenons de l'objet d'autorisations que nous importons
ici.
Donc, avec la notation par points ici, nous pouvons accéder à différents types d'autorisations et ici, tous ces noms en majuscules
sont les différentes autorisations que vous pouvez demander et
ici, nous avons besoin de l'autorisation de la caméra parce que nous voulons accéder à la caméra.
Si vous vouliez accéder à la galerie, ce serait d'ailleurs la permission de rouler la caméra.
Maintenant, je vais prendre la caméra
ici et comme je l'ai dit, cela renvoie une promesse, je veux
utiliser async attendre ici, donc je peux ajouter async ici devant la fonction, puis attendre cela et obtenir
le résultat
et le stocker dans une constante , l'alternative à cela serait alors d'utiliser et de
rattraper cela et là, nous pouvons maintenant vérifier si le résultat. l'état n'est pas égal à accordé, ce qui signifie que l'utilisateur a
refusé, l'utilisateur n'a pas accordé d'autorisations,
dans ce cas, nous ne pouvons pas continuer.
Alors ici, je vais lancer une alerte, alors importez l'alerte
de React Native et lancez une alerte où je dis alerte. alerte, autorisations insuffisantes, vous devez accorder des autorisations d'application de caméra pour utiliser cette application ou toute sortie
que vous souhaitez afficher, puis
j'ajouterai un bouton ici où je dis OK. Maintenant, l'utilisateur devra de toute façon modifier les autorisations
dans les paramètres système, nous ne pouvons donc pas demander à nouveau des autorisations ici une
fois qu'elles ont été refusées.
Donc ici, je veux retourner false parce que c'est la fonction de vérification des autorisations et je veux
retourner false si l'utilisateur ne nous a pas accordé d'autorisations, je
renvoie true sinon parce que maintenant nous savons que
nous avons des autorisations Par ailleurs si nous appelons cela fonctionner plusieurs fois et
l'utilisateur a déjà accordé des autorisations dans le passé, l'utilisateur ne sera plus présenté à cette
invite, de la même façon si l'utilisateur a refusé, dans les deux cas, le résultat est stocké automatiquement par iOS et cette fonction ne
fera que retourne vrai ou faux selon que l'utilisateur a refusé ou accordé l'accès dans le passé.
Vérifiez donc que les autorisations sont maintenant simplement une fonction que nous devons appeler
dans le gestionnaire de prise d'image avant d'essayer d'utiliser l'appareil photo.
Donc ici, je veux aussi utiliser async wait car vérifier les autorisations est bien sûr une
fonction qui
retourne une promesse, donc j'attendrai ceci et je stockerai le résultat que je stockerai dans une constante nommée a permission car
c'est vrai ou faux selon que l'utilisateur a accordé ou non des autorisations.
Maintenant, si c'est faux, donc si ce n'est pas vrai, je reviendrai ici, je ne continuerai pas, je n'ouvrirai
pas la caméra parce que je ne serai pas autorisé à le faire de toute façon, donc nous ne pouvons tout simplement pas
continuer,
c'est la chose.
Sinon, nous pouvons continuer et maintenant nous devrions également pouvoir lancer une caméra sur iOS.
Alors essayons,
sauvons ça et
maintenant avec ça changé, je vais en fait désinstaller expo ici pour m'assurer qu'en ce qui concerne les
permissions que j'y ai accordées, c'est de retour à l'état initial.
Vous n'avez probablement pas besoin de le faire si vous n'avez jamais accordé d'autorisations
dans votre application expo, mais si vous avez joué avec des autorisations et des packages natifs auparavant, vous devez désinstaller puis
réinstaller l'application expo en exécutant à nouveau votre application sur iOS en appuyant sur i dans la console
là-bas pour vous assurer que toutes ces autorisations sont réinitialisées.
Alors maintenant, si nous allons sur le nouvel écran de lecture et que nous cliquons sur Prendre une image,
on me demande si je veux accorder l'accès à la caméra et ici je peux cliquer sur OK et maintenant nous obtenons toujours cette erreur.
Maintenant, la seule raison à cela est que même si nous essayons d'accéder à la caméra ici, cela en fait et c'est juste
quelque chose que je sais pour ce package nécessite des autorisations pour le rouleau complet de la caméra.
Modifions cela pour demander des autorisations sur le rôle de l'appareil photo ici
et avec cela, revenons en arrière et cliquez sur prendre une
image, maintenant je demande si je veux autoriser l'accès aux photos et maintenant si je clique sur oui, l'appareil photo n'est pas disponible sur
le simulateur qui est maintenant une erreur différente et est assez clair quant à ce qui est en cause,
le simulateur iOS n'a tout simplement pas de caméra. Je vais donc continuer sur Android à
partir de maintenant mais bien sûr vous pouvez tester cela sur
un vrai iPhone pour voir que là, ça marche aussi. Si vous y scannez votre code à barres expo avec l'application expo et que
vous y exécutez l'application telle que vous
l'avez vue au début du cours, vous pouvez prendre des images avec un vrai téléphone et je ferai également la démonstration de l'application terminée à
la fin de ce module sur les appareils iOS et Android, sur les appareils réels.
Donc pour le moment, je vais me concentrer sur Android et là bien sûr, nous avons déjà pu l'ouvrir.
On me demande encore ici mais maintenant je peux l'ouvrir et prendre une image. C'est bien sûr sympa mais prendre l'image comme ça n'est pas tout
ce que je veux faire, je
veux aussi pouvoir configurer comment je le prends et je veux pouvoir l'utiliser.