1
00:00:02,120 --> 00:00:07,100
Je vais donc aller à l'écran de présentation du produit car avant d'ajouter un

2
00:00:07,100 --> 00:00:09,590
navigateur, je veux pouvoir voir au

3
00:00:09,590 --> 00:00:18,380
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

4
00:00:18,380 --> 00:00:22,630
exploitez la boutique Redux et obtenez nos produits à partir de là.

5
00:00:22,640 --> 00:00:28,790
Donc, à la fin, ce que nous pouvons faire, c'est que nous pouvons obtenir nos produits et les stocker dans

6
00:00:28,790 --> 00:00:30,800
des produits constants en appelant use selector

7
00:00:30,800 --> 00:00:36,950
et comme vous l'avez appris dans le module précédent sur la gestion de l'état dans Redux, use selector prend

8
00:00:36,950 --> 00:00:44,060
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

9
00:00:44,060 --> 00:00:45,470
là et de

10
00:00:45,770 --> 00:00:47,360
là dans l'état Redux, je

11
00:00:47,360 --> 00:00:53,780
veux puiser dans ma tranche de produits et vous devez utiliser le nom que vous utilisez ici dans les réducteurs combinés

12
00:00:53,990 --> 00:00:57,990
pour obtenir ceci état, les données gérées avec les produits pour l'utilisateur.

13
00:00:58,010 --> 00:01:05,180
Alors ici, je vais dire des produits d'État et maintenant dans cette tranche de notre État, je veux obtenir

14
00:01:06,220 --> 00:01:10,270
des produits disponibles, alors allons-y. produits disponibles ici et c'est cette

15
00:01:10,270 --> 00:01:15,460
syntaxe de fonction de flèche courte où la partie sur le côté droit de la

16
00:01:15,460 --> 00:01:17,020
flèche est automatiquement retournée.

17
00:01:17,020 --> 00:01:21,870
C'est donc ce qui est maintenant stocké dans les produits et donc ici sur la liste

18
00:01:21,880 --> 00:01:28,870
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

19
00:01:28,870 --> 00:01:31,790
et c'est exactement ce dont les données ont besoin.

20
00:01:31,810 --> 00:01:36,730
J'ajouterai également l'extracteur de clé ici, selon la version de React Native que vous utilisez, vous n'en aurez

21
00:01:36,790 --> 00:01:43,450
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

22
00:01:43,450 --> 00:01:49,900
pas seulement une clé mais si vous travaillez avec une ancienne version, vous devez configurer cette fonction d'extraction de clé et cela prend

23
00:01:49,900 --> 00:01:51,940
une fonction qui vous donne l'élément qu'il

24
00:01:51,940 --> 00:01:56,230
regarde et vous devez lui dire quelle devrait être votre clé unique à ce sujet

25
00:01:56,230 --> 00:02:00,100
élément et bien sûr c'est l'élément. id, encore une fois,

26
00:02:00,160 --> 00:02:07,410
les nouvelles versions de React Native n'en ont pas besoin. Maintenant, avec cela, nous devons également fournir le prop

27
00:02:07,410 --> 00:02:14,720
élément de rendu qui pointe vers une fonction qui rend nos différents éléments de liste et ici, je vais commencer simple

28
00:02:14,720 --> 00:02:21,650
et nous affinerons cela plus tard et pour le moment, je vais juste importer le composant texte de React

29
00:02:21,650 --> 00:02:25,590
Native et affichez le titre du produit dans un composant texte.

30
00:02:25,610 --> 00:02:31,580
Donc, ici, nous obtenons nos données d'élément et la valeur de retour de cette fonction que nous devons fournir

31
00:02:31,580 --> 00:02:33,580
pour rendre l'élément devrait retourner un

32
00:02:33,900 --> 00:02:35,780
élément jsx à la fin.

33
00:02:35,810 --> 00:02:42,890
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

34
00:02:42,890 --> 00:02:48,680
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

35
00:02:48,680 --> 00:02:53,000
vous donne et chaque article ici bien sûr est juste un article dans nos produits,

36
00:02:53,000 --> 00:02:58,640
donc c'est donc de ce type de données et donc il a un accessoire de titre bien sûr parce

37
00:02:58,640 --> 00:02:59,830
que c'est ce

38
00:02:59,960 --> 00:03:05,300
que j'attribue ici, donc nous aurons un accessoire de titre ici que je peux produire et bien sûr,

39
00:03:05,300 --> 00:03:10,100
ce n'est pas la forme finale de l'apparence d'un produit dans la liste mais c'est ce que

40
00:03:10,100 --> 00:03:16,900
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

41
00:03:16,900 --> 00:03:20,920
navigateur afin que nous puissions vraiment voir quelque chose à l'écran et que nous ayons des écrans.

42
00:03:21,160 --> 00:03:28,240
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

43
00:03:28,240 --> 00:03:36,020
tout au long de ce module, nous devrons donc certainement importer à partir de la navigation React et je vais bien sûr commencer

44
00:03:36,050 --> 00:03:42,470
simplement avec un navigateur de pile normal que nous pouvons créer à l'aide du créer une fonction de navigateur

45
00:03:42,470 --> 00:03:48,740
de pile, puis nous la créerons simplement ici et je l'appellerai le navigateur de produits, c'est ce que je

46
00:03:48,860 --> 00:03:50,280
stocke ici, le résultat

47
00:03:50,420 --> 00:03:51,700
de la création

48
00:03:51,710 --> 00:03:57,320
de navigateur de pile et le résultat est un composant React si vous vous souvenez et si

49
00:03:57,320 --> 00:04:03,800
vous vous souvenez également , le navigateur de pile de création prend un objet Javascript comme premier argument où nous

50
00:04:03,860 --> 00:04:08,710
mappons les identificateurs d'écran aux composants React qui doivent être chargés en tant qu'écrans.

51
00:04:08,810 --> 00:04:16,040
Donc ici, bien sûr, je vais commencer avec l'écran de présentation des produits et j'importe celui du dossier screens

52
00:04:16,040 --> 00:04:23,930
et là de la partie boutique et là du fichier d'écran de présentation des produits et donc la première chose que

53
00:04:24,020 --> 00:04:26,120
je veux mapper dans ce navigateur

54
00:04:26,120 --> 00:04:33,630
de pile ici est les produits aperçu ou comme vous voulez le nommer, qui est mappé à l'écran de présentation

55
00:04:33,640 --> 00:04:34,800
des produits.

56
00:04:34,790 --> 00:04:41,510
Maintenant, bien sûr, pour ce navigateur de pile qui aura éventuellement plusieurs écrans, je passerai également un deuxième argument pour créer

57
00:04:41,510 --> 00:04:46,790
un navigateur de pile qui est un objet qui nous permet de configurer l'intégralité du navigateur et

58
00:04:47,180 --> 00:04:52,550
là, nous pouvons par exemple configurer des options de navigation par défaut pour chaque écran et là,

59
00:04:52,550 --> 00:04:56,660
je veux configurer ma couleur de fond d'en-tête et ainsi de suite.

60
00:04:57,350 --> 00:05:05,060
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

61
00:05:05,060 --> 00:05:09,620
couleur d'arrière-plan sur n'importe quelle couleur de votre choix et c'est maintenant où le dossier

62
00:05:09,620 --> 00:05:16,000
des constantes entrera en jeu, où j'ajouterai une couleurs. fichier js, où je veux simplement exporter un objet

63
00:05:16,010 --> 00:05:23,330
Javascript par défaut avec une couleur primaire et une couleur d'accent et vous pouvez nommer ces clés comme vous le souhaitez

64
00:05:23,330 --> 00:05:25,760
et maintenant j'ai sélectionné de jolies

65
00:05:25,760 --> 00:05:30,730
couleurs que je veux utiliser ici mais vous pouvez utiliser n'importe quelle couleur vouloir.

66
00:05:30,920 --> 00:05:42,890
Ma couleur principale aura un code hexadécimal de # c2185b et la couleur d'accent a un

67
00:05:42,890 --> 00:05:46,940
code hexadécimal de # ffc107.

68
00:05:47,130 --> 00:05:52,920
Maintenant, de retour dans le navigateur de la boutique, nous pouvons importer à partir de ce dossier de constantes, toujours à

69
00:05:54,020 --> 00:06:00,230
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

70
00:06:00,230 --> 00:06:04,240
style d'en-tête ici est les couleurs. primaire.

71
00:06:04,250 --> 00:06:07,470
Maintenant, avec cela ajouté, j'ajouterai également une

72
00:06:07,530 --> 00:06:15,630
couleur de teinte d'en-tête qui colore le texte du titre par exemple et je le définirai en blanc parce

73
00:06:16,470 --> 00:06:24,900
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

74
00:06:24,900 --> 00:06:33,080
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

75
00:06:33,080 --> 00:06:37,110
en fonction de la plate-forme sur laquelle nous fonctionnons.

76
00:06:37,160 --> 00:06:44,450
Il est donc temps d'importer la plate-forme à partir de React Native et une note ici, dans cette application pratique, je ne

77
00:06:44,450 --> 00:06:49,700
me concentrerai pas trop sur les différences de plate-forme et la conception réactive, je le ferai

78
00:06:49,700 --> 00:06:55,160
dans une certaine mesure pour qu'il y ait une différence fondamentale entre les différentes plates-formes et que

79
00:06:55,190 --> 00:06:58,580
l'application semble bonne sur différentes tailles d'appareils, mais je

80
00:06:58,790 --> 00:07:02,630
ne la testerai pas sur une grande variété de tailles d'appareils.

81
00:07:02,660 --> 00:07:06,910
Vous avez appris tout ce dont vous avez besoin pour le rendre aussi réactif

82
00:07:06,980 --> 00:07:12,230
que possible, alors n'hésitez pas à toujours peaufiner cela plus que je ne le fais ici dans ce module.

83
00:07:12,230 --> 00:07:16,710
En fin de compte, je veux juste m'assurer que ce module ne prend pas des centaines

84
00:07:16,730 --> 00:07:19,250
d'heures, donc je vais donc garder cela au minimum.

85
00:07:19,250 --> 00:07:24,080
Avec cet ensemble, la plate-forme semble être importante pour moi car je veux vraiment avoir

86
00:07:24,440 --> 00:07:28,790
un aspect différent sur l'en-tête selon que nous fonctionnons sur iOS ou Android.

87
00:07:28,790 --> 00:07:34,940
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

88
00:07:34,940 --> 00:07:38,320
sur lequel nous fonctionnons est Android, sinon je définirai la couleur

89
00:07:38,360 --> 00:07:43,820
d'arrière-plan sur une chaîne vide, ce qui signifie que la valeur par défaut sera prise et donc pour

90
00:07:43,820 --> 00:07:45,540
la couleur de la

91
00:07:45,570 --> 00:07:47,420
teinte de l'en-tête, cela ne devrait

92
00:07:47,450 --> 00:07:54,780
é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

93
00:07:54,780 --> 00:07:57,720
veux utiliser la couleur primaire comme couleur de texte

94
00:07:57,720 --> 00:08:04,150
sur iOS, donc si nous ne sommes pas sur Android. Avec cela, le navigateur de produits est configuré.

95
00:08:04,200 --> 00:08:09,240
Maintenant, comme vous l'avez appris dans le module de navigation, vous n'exportez pas ce navigateur, mais

96
00:08:09,240 --> 00:08:14,940
vous l'enveloppez dans un conteneur d'application que vous créez avec la fonction de création de conteneur d'application que

97
00:08:14,940 --> 00:08:16,970
vous obtenez de la navigation React.

98
00:08:16,980 --> 00:08:24,510
Ici, nous pouvons maintenant exporter le conteneur d'application de création par défaut et passer dans le navigateur de produits, comme ceci.

99
00:08:24,510 --> 00:08:27,510
C'est maintenant la navigation d'exportation configurée et c'est ce que nous pouvons

100
00:08:27,630 --> 00:08:30,240
maintenant utiliser dans l'application. js.

101
00:08:30,510 --> 00:08:37,260
Donc, dans l'application. js, nous pouvons maintenant importer notre navigateur de boutique à

102
00:08:39,770 --> 00:08:46,700
partir de la navigation, navigateur de boutique et c'est maintenant ce que j'utilise à l'intérieur de mes balises de fournisseur

103
00:08:46,700 --> 00:08:52,670
ici, donc le navigateur de boutique aime ça. Cela signifie également que nous pouvons nous débarrasser de ces importations

104
00:08:52,700 --> 00:09:00,020
React Native car nous n'utilisons plus aucun de ces composants React Native dans ce composant. Avec tout ce travail, nous devrions maintenant

105
00:09:00,020 --> 00:09:07,130
être en mesure d'exécuter notre application et, espérons-le, d'atterrir sur l'écran de présentation des produits,

106
00:09:07,130 --> 00:09:12,390
où nous verrons une liste de base de produits sans style.

107
00:09:12,470 --> 00:09:17,840
Donc, si j'enregistre cela maintenant, enregistrez toutes ces modifications et que vous vous assurez que npm commence à s'exécuter

108
00:09:17,840 --> 00:09:20,520
et que vous avez des émulateurs opérationnels à

109
00:09:20,870 --> 00:09:26,980
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.

110
00:09:26,980 --> 00:09:35,270
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.

111
00:09:35,300 --> 00:09:36,970
Bien sûr, cela doit être ajouté ici,

112
00:09:36,980 --> 00:09:39,250
sinon vous ne pouvez pas importer à partir de

113
00:09:39,290 --> 00:09:40,640
ce fichier, c'est logique.

114
00:09:40,640 --> 00:09:42,670
Alors maintenant, cela fonctionne et maintenant en

115
00:09:42,740 --> 00:09:44,780
effet ici, je vois mes titres de produits.

116
00:09:44,780 --> 00:09:46,420
Nous voyons également les différents en-têtes, ce que

117
00:09:46,430 --> 00:09:51,500
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

118
00:09:51,500 --> 00:09:57,770
produits, nous pouvons bien sûr ajouter notre écran spécial uniquement aux options de navigation qui seront fusionnées avec

119
00:09:57,770 --> 00:10:04,490
les options de navigation par défaut que nous avons définies directement sur le navigateur en utilisant l'écran de présentation des

120
00:10:04,490 --> 00:10:10,050
produits, notre constante ici qui contient notre composant et en ajoutant le propriété d'options de navigation

121
00:10:10,070 --> 00:10:17,870
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

122
00:10:17,870 --> 00:10:19,630
produits par exemple et

123
00:10:19,810 --> 00:10:24,470
si nous enregistrons maintenant cela, nous voyons tous les produits ici dans l'en-tête.

124
00:10:24,680 --> 00:10:28,870
Donc, cela semble maintenant décent, nous pouvons voir nos produits.

125
00:10:28,970 --> 00:10:32,720
Bien sûr, ces produits ne ressemblent pas vraiment à leur apparence,

126
00:10:32,720 --> 00:10:38,810
la prochaine étape sera donc de s'assurer qu'ici nous obtenons réellement l'apparence dont nous avons besoin dans cette application.