1 00:00:02,390 --> 00:00:08,060 Passons donc à l'écran des filtres et là en ce moment, j'ai juste mon contenu factice, 2 00:00:08,060 --> 00:00:11,420 l'écran du filtre et ce n'est bien sûr pas 3 00:00:11,510 --> 00:00:20,060 ce que je veux là, au lieu de cela je veux avoir du texte en haut en fait où je dis les filtres disponibles 4 00:00:20,060 --> 00:00:25,910 / restrictions ou quelque chose comme ça où je veux pointer un certain objet de style 5 00:00:25,910 --> 00:00:33,560 avec des styles, nommons-le titre peut-être parce que ce sera notre titre principal ici et ci-dessous, je veux avoir mes différents 6 00:00:33,560 --> 00:00:34,250 filtres. 7 00:00:34,250 --> 00:00:41,180 Maintenant, à quoi ressemble un filtre? Nous avons besoin d'un commutateur, d'une case à cocher, quelque chose comme 8 00:00:41,180 --> 00:00:45,210 ça qui nous permet d'activer et de désactiver un filtre et une étiquette pour cela. 9 00:00:45,230 --> 00:00:50,840 Maintenant, cela signifie que probablement une vue a du sens pour regrouper l'étiquette et que les commutateurs 10 00:00:50,840 --> 00:00:52,970 ensemble et les positionnent côte 11 00:00:52,970 --> 00:01:04,560 à côte probablement et je donnerai à la vue un style de conteneur de filtre, quelque chose comme ça et là-dedans, comme je l'ai dit, je veux avoir un texte avec une étiquette, par 12 00:01:04,560 --> 00:01:09,300 exemple dire glutenFree là-bas et à côté de cela, un commutateur et heureusement React 13 00:01:10,050 --> 00:01:16,080 Native a un commutateur intégré, il est appelé commutateur. Le composant switch rend un bon 14 00:01:16,080 --> 00:01:19,140 interrupteur que nous pouvons utiliser, donc ici nous 15 00:01:19,140 --> 00:01:28,180 pouvons simplement utiliser un interrupteur comme celui-ci et le rendre à l'écran. Nous devrons le configurer mais pour commencer, 16 00:01:28,210 --> 00:01:36,520 nous pouvons l'utiliser comme ceci. Maintenant, pour un style de base, pour le titre et le conteneur 17 00:01:36,520 --> 00:01:37,780 de filtre ici, 18 00:01:37,780 --> 00:01:39,490 descendons ici, ajoutons le conteneur 19 00:01:39,490 --> 00:01:48,040 de filtre et le titre ici et le titre est assez simple. Là, je veux à quoi utiliser la famille 20 00:01:48,120 --> 00:01:58,410 de polices open sans bold et une taille de police de 22, une marge dans toutes les directions de 20 et 21 00:01:58,550 --> 00:02:08,580 également définir l'alignement du texte au centre pour centrer cela. À propos, l'écran global ne devrait plus centrer les éléments sur l'axe 22 00:02:08,610 --> 00:02:11,530 principal, donc le centrage vertical ne devrait 23 00:02:11,700 --> 00:02:14,330 plus se produire et pour cela, 24 00:02:14,460 --> 00:02:21,610 nous pouvons simplement nous débarrasser du centre de contenu et le conteneur de filtre devrait en revanche positionner 25 00:02:21,640 --> 00:02:24,970 le commutateur et le texte côte à côte. 26 00:02:24,970 --> 00:02:34,060 Donc, ici, nous pouvons définir la direction de flexion sur la ligne, justifier le contenu peut-être en ajoutant de l'espace autour et aligner les éléments sur l'axe transversal 27 00:02:34,060 --> 00:02:40,080 est au centre, de sorte qu'il soit centré verticalement. Maintenant, regardons cela, si nous enregistrons ceci et que 28 00:02:40,080 --> 00:02:46,290 nous allons à l'écran de filtrage, c'est ce que nous avons. Ici, nous avons un interrupteur et comme vous le voyez en ce moment, 29 00:02:46,290 --> 00:02:47,460 il saute toujours en arrière, 30 00:02:47,460 --> 00:02:53,130 c'est quelque chose que nous allons prendre en charge dans une seconde mais généralement, nous le voyons et ici sur les filtres pour Android, 31 00:02:53,130 --> 00:02:58,380 nous avons un interrupteur Android qui saute également en arrière, mais qui est déjà prédéfini pour Android, c'est donc en fait un 32 00:02:58,380 --> 00:02:58,920 autre 33 00:02:58,920 --> 00:03:05,300 composant intégré à React Native qui a un look par défaut pour Android. Ce n'est donc pas 34 00:03:05,300 --> 00:03:07,240 trop mal. 35 00:03:07,250 --> 00:03:13,070 Une chose que je veux changer est pour le conteneur de filtre, je veux attribuer 36 00:03:13,070 --> 00:03:19,430 une largeur fixe de disons 80% et en fait changer cela ici en espace entre, pas en 37 00:03:19,430 --> 00:03:20,480 espace autour 38 00:03:20,480 --> 00:03:32,030 parce que je pense que cela semble un peu plus agréable maintenant, oui certainement, aussi sur Android et maintenant, nous pouvons nous assurer que ce commutateur fonctionne réellement et qu'il 39 00:03:32,030 --> 00:03:39,440 ne saute pas en arrière lorsque nous le déclenchons. Pour cela, vous devez savoir que pour les commutateurs, vous devez manuellement 40 00:03:39,440 --> 00:03:46,130 gérer leur état et ce n'est en fait pas nouveau, dans React, il est souvent le cas pour ces composants d'entrée, 41 00:03:46,670 --> 00:03:53,120 vous devez stocker ce que l'utilisateur entre et le réinjecter dans le pour refléter cela dans l'interface utilisateur mise à 42 00:03:53,210 --> 00:03:54,790 jour et nous le 43 00:03:55,130 --> 00:03:57,080 faisons avec la gestion des états. 44 00:03:57,100 --> 00:04:03,040 Nous importons donc pour utiliser l'état hook de React afin que nous puissions gérer l'état 45 00:04:03,290 --> 00:04:13,770 ici dans ce composant fonctionnel et qu'ici, j'aurai mon état de gluten et je nommerai ceci isGlutenFree et définirai l'état d'utilisation isGlutenFree, initialement c'est faux et 46 00:04:14,660 --> 00:04:16,930 maintenant ce commutateur ici, vous avez 47 00:04:17,150 --> 00:04:18,800 une propriété value, 48 00:04:22,330 --> 00:04:29,650 c'est une propriété intégrée dans le commutateur intégré où je nourris isGlutenFree, donc cela prend un booléen qui indique 49 00:04:29,650 --> 00:04:36,640 si ce commutateur est rendu comme actif ou non actif, donc s'il est marqué comme vérifié ou 50 00:04:36,640 --> 00:04:42,550 non cochée, je devrais dire et vous avez une propriété onValueChange qui prend une fonction 51 00:04:42,550 --> 00:04:45,160 qui se déclenche chaque fois que 52 00:04:45,160 --> 00:04:49,520 l'utilisateur clique sur ce commutateur. Cette fonction obtient ici la nouvelle 53 00:04:49,610 --> 00:04:56,480 valeur, donc si le commutateur était en mode faux, en mode décoché, la nouvelle valeur sera vraie et vice versa bien 54 00:04:56,480 --> 00:05:02,750 sûr et nous pouvons l'utiliser pour mettre à jour notre état et définir isGlutenFree sur le nouvelle valeur et 55 00:05:03,110 --> 00:05:09,050 puisque nous alimentons également cet état, notre commutateur devrait maintenant être modifiable et devrait rester dans ce 56 00:05:09,290 --> 00:05:10,800 mode mis à jour. 57 00:05:10,820 --> 00:05:17,430 Alors maintenant, si nous y jetons un coup d'œil, nous pouvons vraiment basculer ce commutateur et c'est une amélioration. 58 00:05:17,450 --> 00:05:21,800 Le style du commutateur n'est pas ce que je veux cependant, il utilise une couleur 59 00:05:21,800 --> 00:05:26,010 par défaut, bien sûr je voudrais utiliser mes couleurs que j'utilise tout le temps 60 00:05:26,180 --> 00:05:30,020 dans l'application et pour cela, nous pouvons bien sûr importer nos couleurs 61 00:05:30,020 --> 00:05:39,140 constantes, donc importer des couleurs à partir de constantes / Couleurs et le commutateur a une autre propriété qui nous aide à styler ici, nous pouvons ajouter une couleur de piste 62 00:05:39,710 --> 00:05:45,130 qui nous permet de personnaliser les couleurs de ce commutateur, de sorte que la couleur d'arrière-plan et ainsi de 63 00:05:45,140 --> 00:05:52,910 suite et la couleur de piste prennent un objet comme un valeur, donc nous avons un objet que nous passons ici à cette liaison dynamique où vous 64 00:05:52,910 --> 00:05:59,030 pouvez définir une couleur d'arrière-plan pour le faux état, donc s'il est inactif, s'il n'est pas coché et que je suis 65 00:05:59,030 --> 00:06:04,490 d'accord avec la valeur par défaut en fait, cela semble bon pour moi mais vous pouvez également en définir 66 00:06:04,490 --> 00:06:05,270 un pour 67 00:06:05,660 --> 00:06:09,570 le vrai cas qui est le cas où il est vérifié et là 68 00:06:09,740 --> 00:06:15,680 je veux utiliser les couleurs, la couleur primaire et bien sûr vous pouvez prendre n'importe quelle couleur que vous souhaitez. 69 00:06:15,680 --> 00:06:22,580 Et si nous le faisons et que je reviens aux filtres, nous utilisons maintenant notre propre couleur ici, ce qui 70 00:06:22,580 --> 00:06:24,740 est bien sûr plus conforme au 71 00:06:24,740 --> 00:06:33,340 reste de cette application et, évidemment, cela fonctionnera également ici sur Android. Nous pouvons également définir la couleur du pouce qui est la couleur de 72 00:06:33,340 --> 00:06:41,290 ce pouce ici qui est vert ici sur Android et cela ne prend qu'une chaîne, une chaîne de couleur, donc un code hexadécimal par exemple, 73 00:06:42,410 --> 00:06:49,530 là, nous pouvons également pointer sur les couleurs de la couleur primaire et si nous le faisons, sur iOS, maintenant il a 74 00:06:49,530 --> 00:06:51,270 cette couleur et la même 75 00:06:55,710 --> 00:06:56,820 chose sur Android. 76 00:06:59,660 --> 00:07:03,420 Maintenant, bien sûr, sur iOS, cela ne semble pas vraiment bon, 77 00:07:03,420 --> 00:07:07,480 là je voudrais garder la valeur par défaut et la solution est 78 00:07:07,500 --> 00:07:13,620 assez simple, nous pouvons à nouveau utiliser la bonne ancienne API de la plate-forme, l'importer puis ici lors de 79 00:07:13,620 --> 00:07:21,000 l'attribution d'une couleur de pouce , Je vérifie la plate-forme. os égal à Android, dans ce cas, je veux utiliser la couleur principale pour mon pouce, 80 00:07:21,480 --> 00:07:26,410 sinon je vais le définir sur une chaîne vide, ce qui signifie qu'il utilisera la valeur par défaut qui est blanche sur iOS. 81 00:07:26,510 --> 00:07:31,650 Et avec cela, nous avons ici le même look qu'avant que j'aime sur iOS mais bien 82 00:07:31,650 --> 00:07:33,300 sûr, vous pouvez également 83 00:07:33,300 --> 00:07:40,140 affiner cela selon vos besoins et sur Android, nous aurons toujours le look que nous avons vu auparavant, si je vais dans 84 00:07:40,140 --> 00:07:45,650 le filtre écran ici qui semble bien là aussi. Voilà donc le commutateur et comment nous pouvons 85 00:07:45,950 --> 00:07:50,060 l'ajouter, maintenant nous avons juste besoin de répéter cela pour tous nos autres 86 00:07:50,120 --> 00:07:55,700 commutateurs, donc tous les autres filtres, je veux dire. Je peux donc copier cette vue et l'ajouter 87 00:07:55,700 --> 00:07:56,430 à nouveau 88 00:07:56,990 --> 00:08:01,960 sans lactose ou végétalien, mais si vous vous retrouvez à copier et coller encore et 89 00:08:02,090 --> 00:08:08,900 encore comme nous essayons de le faire ici, c'est toujours un bon cas pour créer un composant séparé ou un fonction 90 00:08:08,900 --> 00:08:10,680 qui rend ce code réutilisable. 91 00:08:10,730 --> 00:08:15,590 Et ici, encore une fois, je vais créer un composant séparé dans ce même fichier parce que je ne l'utilise vraiment que 92 00:08:15,590 --> 00:08:16,040 là-dedans, encore 93 00:08:16,040 --> 00:08:19,150 une fois, vous pouvez également opter pour un fichier séparé si vous le souhaitez. 94 00:08:19,390 --> 00:08:23,720 Je vais le nommer commutateur de filtre et cela obtient quelques accessoires et 95 00:08:23,720 --> 00:08:30,820 dans ce composant, à la fin je retourne ce code, nous avons configuré un pour la vue et le texte et ainsi de 96 00:08:30,820 --> 00:08:31,410 suite 97 00:08:31,610 --> 00:08:37,100 et bien sûr maintenant le texte doit être dynamique. Là, nous pourrions définir cela sur l'étiquette des accessoires et 98 00:08:37,100 --> 00:08:41,810 c'est à vous de décider ce que vous choisissez ici, car vous serez celui qui passera les valeurs des 99 00:08:43,050 --> 00:08:48,930 accessoires plus tard de toute façon et bien sûr ici, ce qui se passe surValueChange et ce que nous transmettons à value diffère également. 100 00:08:48,930 --> 00:08:57,230 Donc ici, cela devrait être l'état des accessoires par exemple ou la valeur des accessoires ou tout ce que vous voulez utiliser et ici pour 101 00:08:57,310 --> 00:09:03,490 onValueChange, je vais simplement pointer sur les accessoires. onChange par exemple, mais encore une fois, tous ces 102 00:09:03,490 --> 00:09:08,140 noms d'accessoires sont entièrement à vous, car vous serez celui qui utilise ce composant 103 00:09:08,140 --> 00:09:16,870 et nous l'utiliserons maintenant ici, comme ceci, donc un composant à fermeture automatique, où nous pouvons maintenant définir une étiquette parce que je m'attends à un 104 00:09:16,870 --> 00:09:20,730 accessoire d'étiquette ici, si vous l'avez nommé différemment, vous devez le 105 00:09:20,800 --> 00:09:22,990 nommer différemment ici bien sûr 106 00:09:22,990 --> 00:09:29,230 et l'étiquette est bien sûr GlutenFree parce que je suis sur le point de remplacer ce commutateur ici. 107 00:09:29,380 --> 00:09:35,830 Ensuite, nous devons passer dans un état parce que j'ai ajouté un accessoire d'état ici pour gérer ma valeur, 108 00:09:35,830 --> 00:09:39,610 si vous l'avez nommé différemment, vous devez également le nommer différemment 109 00:09:39,620 --> 00:09:42,970 là-bas et ici je pointerai sur isGlutenFree, sur mon 110 00:09:42,970 --> 00:09:45,120 état et sur les besoins 111 00:09:45,130 --> 00:09:49,840 de changement à fournir car ici j'utilise l'accessoire onChange pour le lier à onValueChange. 112 00:09:49,840 --> 00:09:55,990 Donc, cela devrait pointer vers une fonction et bien sûr ici, je vais simplement garder cette fonction 113 00:09:55,990 --> 00:10:03,550 ici et puisque j'utilise juste onChange ici pour la transmettre à onValueChange, nous obtenons le nouvel argument de valeur ici également. 114 00:10:04,870 --> 00:10:10,480 Maintenant, nous pouvons nous débarrasser de cette vue là-bas et utiliser simplement notre composant de commutateur de filtre et maintenant simplement 115 00:10:10,510 --> 00:10:13,270 répéter ce qui est bien sûr beaucoup plus facile. 116 00:10:13,270 --> 00:10:23,450 Alors maintenant, ici, nous pouvons également avoir sans lactose, végétalien et végétarien et nous devons 117 00:10:24,490 --> 00:10:34,740 ajouter trois nouveaux états maintenant, alors laissez-moi reproduire ceci, nous avons isLactoseFree et définissons isLactoseFree, ici 118 00:10:34,740 --> 00:10:39,210 nous avons isVegan et définissons isVegan et 119 00:10:39,270 --> 00:10:42,720 ici nous avons isVegetarian et 120 00:10:48,010 --> 00:10:51,000 et définir isVegetarian. 121 00:10:51,020 --> 00:10:57,740 Maintenant, nous devons juste nous assurer d'utiliser les états aux bons endroits, donc pour le deuxième commutateur de filtre 122 00:10:57,760 --> 00:11:02,220 où nous avons le filtre sans lactose, je transmets l'état isLactoseFree et 123 00:11:02,250 --> 00:11:09,100 je mets à jour le jeu isLactoseFree bien sûr. Pour le commutateur végétalien, je transmets 124 00:11:09,160 --> 00:11:17,980 isVegan et nous le mettons à jour avec set isVegan et pour végétarien, nous transmettons isVegetarian et 125 00:11:17,980 --> 00:11:22,060 nous mettons à jour set isVegetarian, comme ceci. 126 00:11:25,410 --> 00:11:25,880 OK, 127 00:11:25,970 --> 00:11:31,790 ça devrait être ça, si nous enregistrons maintenant cela, nous devrions avoir un écran de filtre avec nos différents filtres que nous 128 00:11:31,790 --> 00:11:36,770 pouvons définir indépendamment parce que nous avons des états indépendants. Je pense que ce serait bien 129 00:11:36,770 --> 00:11:43,610 d'avoir un peu d'espacement entre ces lignes, alors implémentons cela. Sur notre conteneur de filtre ici, nous pouvons simplement ajouter 130 00:11:43,610 --> 00:11:50,570 une marge verticale de disons 10 ou 50 peut-être, un peu plus et cela devrait nous assurer que nous avons un 131 00:11:50,570 --> 00:11:51,970 certain espacement là-bas, 132 00:11:52,130 --> 00:11:54,550 oui et cela a l'air plutôt sympa.