Je vais donc aller à l'écran de présentation du produit car avant d'ajouter un
navigateur, je veux pouvoir voir au
moins quelque chose sur cet écran et donc ici, nous devons maintenant importer le sélecteur d'utilisation de React Redux car cela nous permettra de
exploitez la boutique Redux et obtenez nos produits à partir de là.
Donc, à la fin, ce que nous pouvons faire, c'est que nous pouvons obtenir nos produits et les stocker dans
des produits constants en appelant use selector
et comme vous l'avez appris dans le module précédent sur la gestion de l'état dans Redux, use selector prend
une fonction qui reçoit automatiquement l'état , l'état Redux en entrée et qui renvoie ensuite toutes les données que vous souhaitez obtenir de
là et de
là dans l'état Redux, je
veux puiser dans ma tranche de produits et vous devez utiliser le nom que vous utilisez ici dans les réducteurs combinés
pour obtenir ceci état, les données gérées avec les produits pour l'utilisateur.
Alors ici, je vais dire des produits d'État et maintenant dans cette tranche de notre État, je veux obtenir
des produits disponibles, alors allons-y. produits disponibles ici et c'est cette
syntaxe de fonction de flèche courte où la partie sur le côté droit de la
flèche est automatiquement retournée.
C'est donc ce qui est maintenant stocké dans les produits et donc ici sur la liste
plate, nous pouvons bien sûr définir l'accessoire de données égal à nos produits ici que nous avons sélectionné car ce sera un tableau
et c'est exactement ce dont les données ont besoin.
J'ajouterai également l'extracteur de clé ici, selon la version de React Native que vous utilisez, vous n'en aurez
pas besoin car chaque produit de notre application a un ID et les versions plus récentes de la liste plate recherchent également l'ID et
pas seulement une clé mais si vous travaillez avec une ancienne version, vous devez configurer cette fonction d'extraction de clé et cela prend
une fonction qui vous donne l'élément qu'il
regarde et vous devez lui dire quelle devrait être votre clé unique à ce sujet
élément et bien sûr c'est l'élément. id, encore une fois,
les nouvelles versions de React Native n'en ont pas besoin. Maintenant, avec cela, nous devons également fournir le prop
élément de rendu qui pointe vers une fonction qui rend nos différents éléments de liste et ici, je vais commencer simple
et nous affinerons cela plus tard et pour le moment, je vais juste importer le composant texte de React
Native et affichez le titre du produit dans un composant texte.
Donc, ici, nous obtenons nos données d'élément et la valeur de retour de cette fonction que nous devons fournir
pour rendre l'élément devrait retourner un
élément jsx à la fin.
Alors ici, je vais retourner un élément de texte et là-bas, la sortie itemData. article. titre et je peux le faire parce que
les données d'article sont reçues par React Native, cela a un accessoire d'article, c'est aussi quelque chose que React Native
vous donne et chaque article ici bien sûr est juste un article dans nos produits,
donc c'est donc de ce type de données et donc il a un accessoire de titre bien sûr parce
que c'est ce
que j'attribue ici, donc nous aurons un accessoire de titre ici que je peux produire et bien sûr,
ce n'est pas la forme finale de l'apparence d'un produit dans la liste mais c'est ce que
j'utilise pour commencer afin que nous voyions quelque chose à l'écran. Avec cela, en parlant de l'écran, il est bien sûr temps de configurer le
navigateur afin que nous puissions vraiment voir quelque chose à l'écran et que nous ayons des écrans.
Par conséquent, ici, dans le dossier de navigation, je vais ajouter mon ShopNavigator. fichier js et là-bas, nous ajouterons un tas de navigation
tout au long de ce module, nous devrons donc certainement importer à partir de la navigation React et je vais bien sûr commencer
simplement avec un navigateur de pile normal que nous pouvons créer à l'aide du créer une fonction de navigateur
de pile, puis nous la créerons simplement ici et je l'appellerai le navigateur de produits, c'est ce que je
stocke ici, le résultat
de la création
de navigateur de pile et le résultat est un composant React si vous vous souvenez et si
vous vous souvenez également , le navigateur de pile de création prend un objet Javascript comme premier argument où nous
mappons les identificateurs d'écran aux composants React qui doivent être chargés en tant qu'écrans.
Donc ici, bien sûr, je vais commencer avec l'écran de présentation des produits et j'importe celui du dossier screens
et là de la partie boutique et là du fichier d'écran de présentation des produits et donc la première chose que
je veux mapper dans ce navigateur
de pile ici est les produits aperçu ou comme vous voulez le nommer, qui est mappé à l'écran de présentation
des produits.
Maintenant, bien sûr, pour ce navigateur de pile qui aura éventuellement plusieurs écrans, je passerai également un deuxième argument pour créer
un navigateur de pile qui est un objet qui nous permet de configurer l'intégralité du navigateur et
là, nous pouvons par exemple configurer des options de navigation par défaut pour chaque écran et là,
je veux configurer ma couleur de fond d'en-tête et ainsi de suite.
Donc ici, je vais configurer un objet Javascript où je peux définir le style d'en-tête sur un autre objet Javascript où nous pouvons définir la
couleur d'arrière-plan sur n'importe quelle couleur de votre choix et c'est maintenant où le dossier
des constantes entrera en jeu, où j'ajouterai une couleurs. fichier js, où je veux simplement exporter un objet
Javascript par défaut avec une couleur primaire et une couleur d'accent et vous pouvez nommer ces clés comme vous le souhaitez
et maintenant j'ai sélectionné de jolies
couleurs que je veux utiliser ici mais vous pouvez utiliser n'importe quelle couleur vouloir.
Ma couleur principale aura un code hexadécimal de # c2185b et la couleur d'accent a un
code hexadécimal de # ffc107.
Maintenant, de retour dans le navigateur de la boutique, nous pouvons importer à partir de ce dossier de constantes, toujours à
partir des couleurs que nous trouvons dans le dossier de constantes comme celui-ci, puis ici, la couleur d'arrière-plan que je définirai pour un
style d'en-tête ici est les couleurs. primaire.
Maintenant, avec cela ajouté, j'ajouterai également une
couleur de teinte d'en-tête qui colore le texte du titre par exemple et je le définirai en blanc parce
que cette couleur primaire que j'ai configurée est comme une couleur rose-rougeâtre assez forte et donc le blanc est la couleur
que nous devons utiliser pour qu'elle soit clairement lisible et je veux en fait différer en ce qui concerne l'en-tête
en fonction de la plate-forme sur laquelle nous fonctionnons.
Il est donc temps d'importer la plate-forme à partir de React Native et une note ici, dans cette application pratique, je ne
me concentrerai pas trop sur les différences de plate-forme et la conception réactive, je le ferai
dans une certaine mesure pour qu'il y ait une différence fondamentale entre les différentes plates-formes et que
l'application semble bonne sur différentes tailles d'appareils, mais je
ne la testerai pas sur une grande variété de tailles d'appareils.
Vous avez appris tout ce dont vous avez besoin pour le rendre aussi réactif
que possible, alors n'hésitez pas à toujours peaufiner cela plus que je ne le fais ici dans ce module.
En fin de compte, je veux juste m'assurer que ce module ne prend pas des centaines
d'heures, donc je vais donc garder cela au minimum.
Avec cet ensemble, la plate-forme semble être importante pour moi car je veux vraiment avoir
un aspect différent sur l'en-tête selon que nous fonctionnons sur iOS ou Android.
La couleur d'arrière-plan n'est donc pas toujours la couleur principale, mais je ne la définirai que si le système d'exploitation
sur lequel nous fonctionnons est Android, sinon je définirai la couleur
d'arrière-plan sur une chaîne vide, ce qui signifie que la valeur par défaut sera prise et donc pour
la couleur de la
teinte de l'en-tête, cela ne devrait
également être blanc que si nous sommes sur Android, sinon je ne le définirai pas sur une chaîne vide, mais à la place, je
veux utiliser la couleur primaire comme couleur de texte
sur iOS, donc si nous ne sommes pas sur Android. Avec cela, le navigateur de produits est configuré.
Maintenant, comme vous l'avez appris dans le module de navigation, vous n'exportez pas ce navigateur, mais
vous l'enveloppez dans un conteneur d'application que vous créez avec la fonction de création de conteneur d'application que
vous obtenez de la navigation React.
Ici, nous pouvons maintenant exporter le conteneur d'application de création par défaut et passer dans le navigateur de produits, comme ceci.
C'est maintenant la navigation d'exportation configurée et c'est ce que nous pouvons
maintenant utiliser dans l'application. js.
Donc, dans l'application. js, nous pouvons maintenant importer notre navigateur de boutique à
partir de la navigation, navigateur de boutique et c'est maintenant ce que j'utilise à l'intérieur de mes balises de fournisseur
ici, donc le navigateur de boutique aime ça. Cela signifie également que nous pouvons nous débarrasser de ces importations
React Native car nous n'utilisons plus aucun de ces composants React Native dans ce composant. Avec tout ce travail, nous devrions maintenant
être en mesure d'exécuter notre application et, espérons-le, d'atterrir sur l'écran de présentation des produits,
où nous verrons une liste de base de produits sans style.
Donc, si j'enregistre cela maintenant, enregistrez toutes ces modifications et que vous vous assurez que npm commence à s'exécuter
et que vous avez des émulateurs opérationnels à
l'endroit où vous l'avez chargé, j'obtiens une erreur indiquant que l'objet n'est pas un constructeur, évaluant le nouveau produit par défaut.
Le problème devrait être que dans mon dossier de modèles ici, j'ai oublié d'exporter ma classe de produits par défaut.
Bien sûr, cela doit être ajouté ici,
sinon vous ne pouvez pas importer à partir de
ce fichier, c'est logique.
Alors maintenant, cela fonctionne et maintenant en
effet ici, je vois mes titres de produits.
Nous voyons également les différents en-têtes, ce que
nous ne voyons pas est un titre d'en-tête car je n'en ai pas ajouté. Par conséquent, dans l'écran de présentation des
produits, nous pouvons bien sûr ajouter notre écran spécial uniquement aux options de navigation qui seront fusionnées avec
les options de navigation par défaut que nous avons définies directement sur le navigateur en utilisant l'écran de présentation des
produits, notre constante ici qui contient notre composant et en ajoutant le propriété d'options de navigation
et ici nous pouvons utiliser des options de navigation statiques pour le moment, ajouter un titre d'en-tête et le définir pour tous les
produits par exemple et
si nous enregistrons maintenant cela, nous voyons tous les produits ici dans l'en-tête.
Donc, cela semble maintenant décent, nous pouvons voir nos produits.
Bien sûr, ces produits ne ressemblent pas vraiment à leur apparence,
la prochaine étape sera donc de s'assurer qu'ici nous obtenons réellement l'apparence dont nous avons besoin dans cette application.