Donc pour ce module, ci-joint vous retrouvez un simple projet de départ.
Voilà l'application. fichier js avec une vue vide,
donc il ne se passe pas trop de choses là-bas.
Vous obtenez un dossier de constantes avec une couleur de base que j'ai mis en place pour vous et c'est tout.
A part ça, il n'y a rien d'intéressant ici, c'est une application très
basique que nous allons maintenant utiliser pour construire cette application que je viens d'esquisser.
Maintenant, bien sûr, vous pouvez absolument aller de l'avant et créer vous-même
les bases, donc ces trois écrans différents dont nous avons finalement besoin ou quatre écrans différents, un pour tous les lieux, un
pour les détails du lieu, un pour créer un nouveau place et un pour la carte plein écran que nous
voulons également montrer, vous pouvez absolument le faire et construire le squelette de base pour ces écrans par vous-même,
configurer également la navigation de base car ce sont bien sûr toutes les choses que nous avons déjà faites plusieurs
fois Dans ce cours.
C'est aussi des choses que je vais commencer dans les prochaines conférences au cas où vous voudriez suivre ou
comparer votre solution à la mienne et par la suite, nous nous plongerons dans la
chair de ce module, nous nous pencherons sur la façon d'ajouter des capacités de périphérique natif . Commençons donc par les
bases.
Je vais ajouter un nouvel écran de dossier avec les quatre écrans que je veux avoir et ce serait le
fichier d'écran de la liste des lieux, le fichier d'écran des détails du lieu, le nouveau fichier d'écran du lieu et également l'écran de la carte où nous pouvons alors voir ce plein écran carte
et je vais les remplir avec du contenu tout au long de ce module, mais ce
sont les quatre écrans de base dont j'ai besoin.
Je vais également ajouter un dossier de navigation afin que nous puissions y configurer la navigation et
ici, je vais configurer mon PlacesNavigator. fichier js. Maintenant, dans le projet de démarrage que
j'ai fourni, la navigation
React et toutes ses dépendances sont déjà installées, donc si vous l'utilisez,
vous n'avez pas besoin de l'installer manuellement, sinon si vous utilisez votre propre projet de démarrage,
assurez-vous de installez React navigation avec npm installez React navigation et assurez-vous également d'installer ces dépendances supplémentaires ici pour
vous assurer que React navigation fonctionne avec expo.
Donc, avec cela installé, maintenant bien sûr, nous pouvons configurer la navigation ici dans le navigateur de lieux et pour cela, ici,
j'importe à partir de la navigation React et ce que j'importe est bien sûr la
fonction de création de navigateur de pile, alors créez un navigateur de
pile et créez également un conteneur d'application, ce que nous devons également faire, car nous devons faire les deux
- créer un navigateur de pile et configurer le conteneur d'application par la suite.
Maintenant, nous devons également importer les écrans avec lesquels nous voulons travailler et ce serait l'écran de la liste des lieux que j'importe
à partir du dossier screens et là, c'est l'écran de la liste des lieux. Nous aurons également besoin de l'écran de détail de
lieu bien sûr, de l'écran de détail de lieu qui est importé à partir de l'écran de détail des
écrans et aussi, évidemment, des deux autres écrans.
Nous avons donc obtenu le nouvel écran de lieu à partir des écrans, le nouvel écran de lieu et enfin et surtout, nous devons également importer notre
écran de carte ici à partir du dossier screens, puis ce serait l'écran de carte.
Maintenant, nous pouvons configurer notre navigateur de pile ici et je vais stocker ce navigateur de lieux dans une constante et comme
vous l'avez également appris, nous mappons maintenant les identifiants à nos écrans,
nous avons donc peut-être l'identifiant des lieux mappé à l'écran de la liste des lieux , nous avons obtenu l'identifiant
de détail de lieu mappé sur
l'écran de détail de lieu, nous avons également obtenu le nouvel identifiant de lieu mappé sur le nouvel écran de lieu et enfin
et surtout, peut-être la carte mappée sur l'écran de carte. Et avec cela, nous pouvons configurer quelques options de navigation par défaut
ici, donc je vais passer un deuxième argument et bien sûr, le configurer est totalement facultatif, mais je
vais donc ajouter des options de navigation par défaut à chaque écran et je veux définir mon le style d'en-tête ici et assurez-vous que
nous utilisons une couleur d'arrière-plan selon que nous fonctionnons sur Android ou non.
Par conséquent, j'importerai cette chose API de plate-forme à partir de React Native et j'aurai également besoin de ma couleur, donc j'importe également
des couleurs à partir de constantes / couleurs, ce qui est également nécessaire car avec cela, nous pouvons maintenant vérifier si le système d'exploitation de la
plate-forme est Android et si c'est le cas, nous pouvons nous assurer que la couleur d'arrière-plan de l'en-tête
est notre couleur principale, sinon
je ne définirai aucune couleur, je veux utiliser l'aspect transparent par défaut qu'iOS utilise et ici également configurer une couleur de
teinte d'en-tête pour le texte là-bas, vérifiant à nouveau la plate-forme parce que si la plate-forme est Android, car
nous avons un fond uni, je vais définir la couleur de la teinte sur blanc, pour iOS, je ferai
le contraire, là je le définirai sur mon couleur primaire. Maintenant que c'est ici, je n'ai pas de polices personnalisées dans ce projet,
bien sûr, vous pouvez en ajouter si vous le souhaitez. Avec cette configuration, nous pouvons exporter notre conteneur d'application que nous
devons donc créer avec créer un conteneur d'application et passer dans le navigateur de lieux ici. Maintenant, c'est la navigation configurée, bien sûr
dans l'application.
fichier js, nous pouvons maintenant l'utiliser.
Donc, ici, nous devons importer le navigateur de lieux à partir du dossier de navigation, navigateur de lieux, nous n'avons plus besoin d'importer la
vue ici et nous pouvons simplement retourner le navigateur de lieux. Comme je ne charge pas de polices personnalisées, je n'ai pas
non plus besoin de faire cette application en chargeant des trucs que nous avons faits
dans les modules précédents ou dans d'autres modules, ici je peux simplement le retourner dès le début.
Maintenant, dans ces écrans ici, dans l'écran de la liste des lieux, je vais importer React de React, je vais importer quelques éléments de React
Native, probablement une vue, un texte et une
feuille de
style et ensuite nous pouvons voir si nous avons besoin d'autre chose plus tard à partir de React Native et ensuite configurer
la constante ici, l'écran de la liste des lieux est un composant React normal qui reçoit des accessoires et dont la fin retourne du contenu,
ici je vais juste retourner une vue avec un texte de l'écran de
la liste des lieux, donc juste quelques-uns le contenu factice pour l'instant et la feuille de
style est également configurée ici avec la feuille de style. créer et, finalement, exporter
l'écran de la liste des lieux.
Et ce sera le squelette de base que nous pouvons utiliser pour
chaque vue, donc je vais le déposer dans chaque vue et juste ajuster ce nom ici.
Nous avons donc ici l'écran de détail de lieu que je veux utiliser, puis copiez-le également dans le nouvel écran de
lieu et remplacez ce nom ici dans les trois endroits
et enfin et surtout, déposez-le également dans l'écran de carte pour l'avoir ici comme bien, puis
nous ajouterons bien sûr le vrai contenu tout au long de ce module.
Voilà donc les écrans créés, si nous enregistrons
maintenant cela et que vous l'exécutez avec npm start ou avec expo start et que vous l'exécutez sur votre
émulateur ou émulateurs préférés, une fois ce bâtiment terminé, nous devrions voir l'écran de la liste des lieux
à la fin, comme cette.
Maintenant, bien sûr, nous n'avons pas de titre d'en-tête ici, alors assurons-nous d'en définir un, également sur Android en
allant à l'écran de la liste des lieux et là-dedans, nous pouvons ajouter des options de navigation à l'écran de la liste des lieux et le définir
sur un objet statique ici où nous pouvons ajouter un titre d'en-tête de tous les lieux ou quelque chose comme ça et avec cela bien sûr, une
fois que cela se recharge, nous voyons ce titre ici sur l'écran de la liste des lieux.
C'est donc la configuration de base de l'écran dont nous aurons besoin pour ce module ici. Avec cela avant de plonger plus profondément dans le
contenu des autres écrans, assurez-vous en fait d'avoir
un bouton plus ici dans l'en-tête qui nous amène au nouvel écran de
lieu, car c'est alors que nous pouvons commencer à puiser dans fonctionnalités de l'appareil natif et
avec l'ajout de lieux.
Maintenant, bien sûr, vous savez comment ajouter un bouton à l'en-tête de votre navigateur, tout ce que vous avez à faire est d'installer
un nouveau package avec npm install --save et c'est le package react-navigation header-buttons que nous avons utilisé plusieurs fois tout au long
de ce cours et je vais l'utiliser exactement de la même manière que je l'ai utilisé
dans le reste du cours.
Je vais donc créer un dossier de composants dans lequel je peux configurer
mon propre composant de bouton d'en-tête pour avoir ce composant de bouton réutilisable préconfiguré et dans ce composant, j'importe le bouton d'en-tête de ce
package de boutons d'en-tête de navigation React que nous venons d'installer. Importez des Ionicons depuis expo / vector-icons, un package que vous voudrez peut-être
installer au cas où vous obtiendriez des erreurs ici avec
npm install --save et importez également la constante de couleurs du dossier constantes et là, le fichier de couleurs et puis ici nous avoir un bouton d'en-tête personnalisé
de composant régulier qui reçoit des accessoires qui retournent du jsx et ici je
veux retourner le bouton d'en-tête que nous importons mais maintenant nous allons simplement le configurer
selon nos besoins.
Tout d'abord en lui transmettant tous les accessoires, puis nous pouvons définir le composant icône sur ionicon pour
qu'il soit
utilisé, définir la taille de l'icône ici peut-être sur 23 parce que je pense que cela a très bien
fonctionné jusqu'à présent et définir
la couleur sur et maintenant je j'aurai besoin d'une autre importation, je devrai importer la plate-forme à partir de React Native parce que maintenant
je veux vérifier la plate-forme ici et
si la plate-forme est Android, nous aurons un fond solide, donc je veux utiliser le blanc comme
couleur de l'icône, sinon j'utilise ma couleur principale.
Maintenant, avec cela, la seule chose qui reste à faire est d'exporter ce bouton d'en-tête personnalisé ici et maintenant nous pouvons commencer
à l'utiliser dans l'écran de la liste des lieux. Là aussi comme avant, j'importe
deux autres packages à partir de react-navigation-header-buttons, deux autres choses à partir de ce package et qui seraient mes boutons d'en-tête et
élément, les deux doivent être importés et en plus, nous pouvons également importer notre propre bouton d'en-tête personnalisé
maintenant à partir du dossier des composants et à partir de ce fichier de bouton d'en-tête
dans lequel nous venons de travailler. Mais avec cela importé, nous pouvons changer nos
options de navigation ici pour être dynamiques, où nous avons cette fonction qui nous donne les données de navigation et
qui retourne finalement cet objet de configuration car cela nous permettra ensuite de lier également le bouton à une fonction qui nous
recevons via les paramètres de route car ici, je veux ajouter un en-tête à droite pour ajouter mes boutons d'en-tête et bien sûr,
c'est maintenant aussi un modèle que nous avons fait plusieurs fois tout au long de ce cours,
nous avons ajouté les boutons d'en-tête comme celui-ci et avoir l'élément dedans. Sur le composant de boutons d'en-tête, nous pouvons définir le
composant de bouton d'en-tête et pointer sur notre composant de bouton d'en-tête personnalisé ici et sur l'élément, nous définissons maintenant un titre,
comme ajouter un lieu et nous définissons ici un nom d'icône qui dépend
de la plate-forme, donc par conséquent, je vais réellement importer cette API de plate-forme ici à partir de React Native et nous pouvons
maintenant vérifier si le système d'exploitation de la plate-forme est Android, si c'est le cas, alors je veux le définir sur md add, sinon
sur ios add qui ajoute un bouton plus pour le plate-forme spécifique, donc
en suivant l'apparence spécifique de cette plate-forme. Nous devons également ajouter la fonction onPress et
là, si nous tapons dessus, je veux simplement naviguer avec la méthode de navigation ici et c'est pourquoi nous devons
avoir cette fonction dynamique ici, afin que nous ayons accès aux données de navigation, puis à la navigation,
naviguer vers un nouvel endroit et un nouvel endroit ici est bien sûr mon identifiant dans le navigateur de lieux de cet écran de nouvel endroit.
Donc, avec cela, nous avons un moyen d'aller à cet écran et donc si nous enregistrons cela, nous devrions être en
mesure de le faire.
Évidemment, je reçois une erreur parce que dans mon composant de bouton d'en-tête, car j'ai un composant React dedans, l'importation de
React à partir de React ne semble pas être la pire idée, alors corrigeons rapidement cela ici
dans le composant de bouton d'en-tête, mais maintenant avec ça , comme cela se recharge, nous avons ce bouton plus
et nous pouvons aller à l'écran des nouveaux lieux, au nouvel écran des lieux, également ici sur Android bien sûr.
Maintenant, sur ce nouvel écran de lieu, nous pouvons donc également ajouter des options de navigation pour définir un titre, de
nouvelles options de navigation de l'écran de lieu, le définir pour un objet statique pour le moment parce que nous n'avons pas
besoin pour le moment d'une fonction, nous ne 'ai pas besoin d'accéder aux données de navigation, nous avons juste besoin de définir le titre d'en-tête pour ajouter
un lieu et avec cela si nous l'enregistrons, évidemment si nous y allons, nous voyons ce titre dans l'en-tête.
C'est donc cette configuration de base ici, maintenant nous
pouvons travailler sur cet écran d'ajout de lieu pour nous assurer que nous pouvons ajouter un lieu.