Travaillons donc maintenant sur l'écran des commandes et sortons plus que ce texte ennuyeux.
Maintenant, tout comme pour l'écran du panier et l'écran de présentation des produits, je veux un article de commande plus complexe
et je vais donc créer un composant d'article de commande séparé dans le dossier des composants et là dans un dossier de magasin.
Comme toujours, c'est à vous de décider si
vous le faites aussi mais comme ce ne sera pas un super petit composant, je préfère l'avoir dans un fichier séparé.
Je vais donc importer React à partir de React ici et sans surprise, bien sûr, importer un tas de choses à partir
de React Native et ce serait la vue, le texte, la feuille de style puisque nous allons certainement mettre en place certains styles ainsi
qu'un bouton parce que moi aussi veulent pouvoir développer une commande afin que nous ne voyions pas toujours tous les articles qui font partie de
la commande mais que nous puissions les voir si nous le souhaitons. Maintenant, avec cela, nous pouvons créer notre constante d'article de commande
ici, de sorte que ce sera le composant lui-même qui recevra les accessoires, puis à la fin aura son corps ici et renverra
du code jsx et nous avons besoin d'un objet de styles ici avec Stylesheet. créer comme ceci et
également exporter l'article de commande par défaut.
Maintenant, à quoi devrait ressembler un article de commande?
Maintenant comme toujours, c'est à vous mais je vais travailler avec une vue ici et mon idée est que je montre toujours comme le montant
total de cette commande et la date et ensuite un bouton afficher les détails sur lequel nous pouvons appuyer pour voir les articles individuels
qui font partie de la commande et pour ces articles, j'utiliserai en fait le composant d'article du panier ici
parce que je veux rendre exactement les mêmes articles que ceux que j'affiche dans un panier.
Je vais donc réellement importer l'article du panier à partir du composant de l'article du panier et le réutiliser ici.
Maintenant, revenons à ce code jsx,
donc nous avons une vue d'habillage autour de notre objet de commande entier, notre entrée de commande entière ici.
Maintenant, là-dedans, je veux avoir une première ligne et donc je vais utiliser une autre
vue afin que nous puissions styliser cela de manière appropriée qui devrait contenir du texte qui affiche notre total, donc la somme de cet ordre disons
et un autre texte où je montre la date et cela devrait être dans la même ligne avec un espace entre eux.
En dessous d'eux comme je l'ai mentionné devrait être un bouton sur lequel nous pouvons appuyer pour afficher les détails qui montrent ensuite tous
les articles qui font partie de cette commande. Maintenant, avec cette configuration,
il est clair que le montant ici doit être reçu à l'aide d'accessoires.
Donc là, je m'attends à obtenir un montant prop et je vais appeler fixe 2 pour sortir le nombre
approprié de décimales. Maintenant, pour la date,
je veux sortir la date des accessoires ici afin que nous ayons une date que nous pouvons sortir. Pour le style, dans l'ensemble ici, je veux avoir une affectation de
style d'élément de commande afin que nous puissions styliser toute la commande, puis là, nous avons besoin,
disons, d'un résumé des styles pour pouvoir styliser cette ligne et en
ce qui concerne le texte ici, cela devrait avoir un style de disons montant total, comme toujours ces identifiants de style sont à vous,
ici je
veux avoir un style de date.
Le bouton devrait également avoir sa propre couleur que j'obtiendrai de la constante des couleurs, donc cette importation
doit être ajoutée
et là, j'utiliserai ma couleur principale. D'accord, c'est tout pour le
moment, je
reviens aux détails dans une seconde,
maintenant appliquons un style ici pour que nous puissions voir quelque chose. Pour l'article de commande lui-même, je vais à nouveau réutiliser ce
look de panier que j'ai déjà dans l'article de produit, je vais donc copier tous ces paramètres ici à partir de
l'article de produit et les déplacer vers l'article de commande afin qu'une
ombre soit appliquée , une couleur d'arrière-plan, un rayon de bordure, tout cela devrait être appliqué.
De plus, j'ajouterai une marge de 20 dans toutes les directions afin que chaque article de la commande soit espacé.
À l'intérieur de l'article de commande, je veux également avoir un rembourrage de 10 afin que le contenu ne
se trouve pas directement sur les bords de la bordure environnante, etc. Maintenant, pour le résumé qui est cette vue qui contient les
deux morceaux de texte, le style devrait en fait
être que nous avons une direction flexible de la ligne car les éléments
doivent être assis côte à côte. Justifier le contenu doit être
un espace entre et en plus de cela, aligner les éléments doit être au centre, de sorte que sur l'axe transversal qui
est ici l'axe vertical, les éléments sont centrés.
Je veux également m'assurer que nous prenons ici toute la largeur disponible pour distribuer le texte. Maintenant, pour le montant total qui est le
style appliqué à cette première partie de texte qui génère le montant, là comme toujours, vous pouvez le styler comme vous le
souhaitez, mais je définirai une famille de polices open sans bold pour utiliser cette version en
gras de ma police et donnez-lui une taille de police de 16 disons, puis pour la date qui est mon style, j'ai appliqué
à ce texte de date ici, là, à la fin,
je veux également utiliser une taille de police de 16 mais la famille de polices sera juste ouverte sans,
sans la version
audacieuse et en plus, nous pouvons également réutiliser cette couleur grisâtre foncé ici. Maintenant, essayons et utilisons cet article de
commande dans l'écran des commandes.
Donc, là-dedans, nous devons d'abord importer l'article de commande, puis bien sûr aller dans le dossier des composants,
dans le dossier de la boutique, puis importer l'article de commande à partir de ce fichier d'article de
commande et ici au
lieu de rendre ce texte, nous rendons maintenant cet élément de commande ici en tant que balise à fermeture automatique
et bien sûr, nous devons le configurer.
Cela nous oblige à passer le montant et la date et plus tard également les articles de détail, donc les
articles de la commande
mais cela viendra dans une deuxième étape.
Donc pour l'instant ici, nous devons passer le montant et cela bien sûr est simplement itemData. article qui est une seule commande, n'oubliez pas que nous parcourons toutes
les commandes
ici, qui est un tableau de commandes, donc c'est une seule
commande et là-dedans, le
montant si nous regardons notre modèle de commande est stocké dans un champ montant total, la date est ensuite
stockée dans le champ date.
Donc, ici, nous accédons au champ du montant total et pour l'accessoire de date que nous devons également transmettre,
nous pouvons accéder à itemData. article. Date. Si nous enregistrons maintenant
ceci et que nous y jetons un coup d'œil, ajoutons du contenu ici, commandons ceci et ensuite allons à notre écran de commandes et nous obtenons cette erreur.
Maintenant, cela fait référence à des objets qui ne sont pas valides comme React devrait et nous
montre qu'en fin de compte, c'est l'objet d'état avec lequel il a un problème et cela a du sens parce que la date dans notre
commande lorsque nous le créons ici dans notre boutique Redux est une date Javascript objet.
Maintenant, nous ne pouvons pas afficher cela sous forme de texte comme ça. Pour le sortir, nous pouvons
aller à notre modèle mais ici, qui est finalement le plan que nous utilisons pour créer les commandes
et dans le modèle de commande, nous pouvons faire quelque chose que nous n'avons pas fait auparavant, nous pouvons ajouter une
méthode à cela modèle ou pour être précis, un getter qui est une fonctionnalité Javascript par défaut du Javascript moderne.
Donc ici, nous pouvons utiliser le mot-clé get puis n'importe quel nom de votre choix comme date lisible qui est
comme une fonction mais pas une fonction que vous appelez comme une fonction mais à laquelle vous accédez
comme une propriété à la fin qui retourne une valeur calculée et là Je veux renvoyer cette date, donc l'objet date qui est
stocké pour cet objet mais nous pouvons ensuite appeler la chaîne de date locale qui est une méthode Javascript intégrée que nous pouvons utiliser sur les objets
date pour convertir cet objet en une date lisible par l'homme. Là on passe dans le langage pour lequel on
veut l'optimiser comme ça par exemple et maintenant on peut le configurer avec un
deuxième argument qui est un objet Javascript. Là, vous pouvez définir comment
l'année doit être configurée et attachée, vous trouverez les documents détaillés
pour cette méthode si vous voulez tout savoir et par exemple, nous pouvons définir l'année en numérique,
le mois en long, le jour en numérique, l'heure à deux chiffres et la minute également à deux chiffres.
Maintenant, nous avons cette propriété de date lisible à laquelle nous pouvons accéder sur n'importe quel article de commande
et là pour l'instant dans l'écran des commandes, au lieu de passer l'objet de données comme ceci, j'accède à une
date lisible qui est maintenant cette nouvelle propriété getter que nous avons ajoutée et maintenant quoi vous verrez que si je passe à
nouveau cette commande ici en cliquant sur commander maintenant et que je passe maintenant à mes commandes, vous voyez maintenant le montant total et cette date
correctement formatée et maintenant si je fais la même chose sur Android et que je passe une commande ici et je vais
à l'écran de mes commandes, vous voyez la même chose là-bas. Maintenant là, je veux juste ajuster un peu ce bouton, en général
aussi sur iOS, il ne devrait pas être aussi large, pas aussi large ici. Donc, dans le composant d'élément de commande où j'ai ce bouton, à la
fin ce que nous pouvons faire est sur cette vue ici, nous pouvons ajouter aligner les éléments au centre pour centrer le contenu le long de l'axe transversal qui est de gauche à droite et donc maintenant si j'essaie ceci à
nouveau et je passe cette commande et je passe aux commandes, vous voyez que ce n'est plus pressable là-bas et c'est encore plus
clair sur Android si nous le rechargeons là-bas et je passe cette commande très rapidement
ici, allez à l'écran des commandes, maintenant nous avons ce bouton. Maintenant, bien sûr, l'objectif est que lorsque nous
appuyez sur ce bouton, cet ordre se développe ici. Au fait, vous remarquerez sur Android que cette date
ne s'affiche pas correctement, c'est
donc une autre chose que nous devons corriger.
Maintenant, la raison pour laquelle cela ne s'affiche pas correctement est la façon dont React Native fonctionne en interne,
quel moteur Javascript qu'il utilise en interne et celui qu'il utilise pour Android là-bas ou sur les plates-formes Android ne prend tout simplement
pas en charge cette méthode de chaîne de date agréable aux paramètres régionaux que j'utilise ici .
Le moteur utilisé sur iOS le fait mais sur
Android, ce n'est pas le cas, ce qui est bien sûr gênant et pas terrible.
Alors, que pouvons-nous faire sur Android pour résoudre ce problème?
La solution consiste à installer une bibliothèque distincte qui s'appelle moment. js, nous avons installé avec npm install
--save moment.
Il s'agit d'une bibliothèque tierce qui fonctionnera sur
les deux plates-formes, ce qui rend le formatage des dates également très simple.
Attendons donc la fin de cette installation.
Maintenant que celui-ci est installé, vous importez tout sous forme d'instant en instant et à partir de la bibliothèque que vous venez
d'installer et vous pouvez maintenant l'utiliser dans ce fichier ici.
Maintenant, nous pouvons commenter ceci ici et retourner à la place moment, exécuté comme une fonction et passer
ici. date,
donc l'objet date que nous voulons formater et appeler le format. Maintenant, le format prend une chaîne où vous pouvez configurer comment formater cela
et attaché, vous trouverez également un lien vers les documents officiels où vous pouvez tout
savoir sur les possibilités que vous avez là-bas.
Maintenant, voici un exemple, une façon de formater ceci, disons un long mois que vous faites avec
4 Ms majuscules, puis le o pour avoir une date bien formatée dans ce mois, une sortie
jour par mois, une année représentée par quatre chiffres et puis une heure toujours représentée avec deux chiffres et les minutes et maintenant
si nous l'enregistrons et
nous l'essayons, commencez sur iOS, ajoutez ceci ici au panier, allez dans le panier et commandez ceci et maintenant allez dans
les commandes, cela ressemble
bien.
Et maintenant, si nous essayons également sur Android, nous
commandons cela et ensuite nous passons aux commandes, cela semble également bien là-bas.
Maintenant, c'est un petit correctif, travaillons maintenant sur le bouton
et lui donnons un peu d'espacement en plus de réduire sa taille et cela peut être fait en allant au résumé
ici qui est le style appliqué à la vue qui contient les deux morceaux de texte,
là nous pouvons simplement ajouter une marge au bas de disons 15 afin d'avoir un certain espacement entre cette ligne de résumé qui
est cette ligne de texte en haut et le bouton en dessous. Je vais donc ajouter ceci à mon panier ici, commander ceci, puis revenir ici, aller aux commandes, maintenant
ça a l'air bien.
Maintenant, assurons-nous que le bouton
Afficher les détails fait aussi quelque chose.