Passons donc à l'écran des filtres et là en ce moment, j'ai juste mon contenu factice,
l'écran du filtre et ce n'est bien sûr pas
ce que je veux là, au lieu de cela je veux avoir du texte en haut en fait où je dis les filtres disponibles
/ restrictions ou quelque chose comme ça où je veux pointer un certain objet de style
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
filtres.
Maintenant, à quoi ressemble un filtre? Nous avons besoin d'un commutateur, d'une case à cocher, quelque chose comme
ça qui nous permet d'activer et de désactiver un filtre et une étiquette pour cela.
Maintenant, cela signifie que probablement une vue a du sens pour regrouper l'étiquette et que les commutateurs
ensemble et les positionnent côte
à 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
exemple dire glutenFree là-bas et à côté de cela, un commutateur et heureusement React
Native a un commutateur intégré, il est appelé commutateur. Le composant switch rend un bon
interrupteur que nous pouvons utiliser, donc ici nous
pouvons simplement utiliser un interrupteur comme celui-ci et le rendre à l'écran. Nous devrons le configurer mais pour commencer,
nous pouvons l'utiliser comme ceci. Maintenant, pour un style de base, pour le titre et le conteneur
de filtre ici,
descendons ici, ajoutons le conteneur
de filtre et le titre ici et le titre est assez simple. Là, je veux à quoi utiliser la famille
de polices open sans bold et une taille de police de 22, une marge dans toutes les directions de 20 et
é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
principal, donc le centrage vertical ne devrait
plus se produire et pour cela,
nous pouvons simplement nous débarrasser du centre de contenu et le conteneur de filtre devrait en revanche positionner
le commutateur et le texte côte à côte.
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
est au centre, de sorte qu'il soit centré verticalement. Maintenant, regardons cela, si nous enregistrons ceci et que
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,
il saute toujours en arrière,
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,
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
autre
composant intégré à React Native qui a un look par défaut pour Android. Ce n'est donc pas
trop mal.
Une chose que je veux changer est pour le conteneur de filtre, je veux attribuer
une largeur fixe de disons 80% et en fait changer cela ici en espace entre, pas en
espace autour
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
ne saute pas en arrière lorsque nous le déclenchons. Pour cela, vous devez savoir que pour les commutateurs, vous devez manuellement
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,
vous devez stocker ce que l'utilisateur entre et le réinjecter dans le pour refléter cela dans l'interface utilisateur mise à
jour et nous le
faisons avec la gestion des états.
Nous importons donc pour utiliser l'état hook de React afin que nous puissions gérer l'état
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
maintenant ce commutateur ici, vous avez
une propriété value,
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
si ce commutateur est rendu comme actif ou non actif, donc s'il est marqué comme vérifié ou
non cochée, je devrais dire et vous avez une propriété onValueChange qui prend une fonction
qui se déclenche chaque fois que
l'utilisateur clique sur ce commutateur. Cette fonction obtient ici la nouvelle
valeur, donc si le commutateur était en mode faux, en mode décoché, la nouvelle valeur sera vraie et vice versa bien
sûr et nous pouvons l'utiliser pour mettre à jour notre état et définir isGlutenFree sur le nouvelle valeur et
puisque nous alimentons également cet état, notre commutateur devrait maintenant être modifiable et devrait rester dans ce
mode mis à jour.
Alors maintenant, si nous y jetons un coup d'œil, nous pouvons vraiment basculer ce commutateur et c'est une amélioration.
Le style du commutateur n'est pas ce que je veux cependant, il utilise une couleur
par défaut, bien sûr je voudrais utiliser mes couleurs que j'utilise tout le temps
dans l'application et pour cela, nous pouvons bien sûr importer nos couleurs
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
qui nous permet de personnaliser les couleurs de ce commutateur, de sorte que la couleur d'arrière-plan et ainsi de
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
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
d'accord avec la valeur par défaut en fait, cela semble bon pour moi mais vous pouvez également en définir
un pour
le vrai cas qui est le cas où il est vérifié et là
je veux utiliser les couleurs, la couleur primaire et bien sûr vous pouvez prendre n'importe quelle couleur que vous souhaitez.
Et si nous le faisons et que je reviens aux filtres, nous utilisons maintenant notre propre couleur ici, ce qui
est bien sûr plus conforme au
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
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,
là, nous pouvons également pointer sur les couleurs de la couleur primaire et si nous le faisons, sur iOS, maintenant il a
cette couleur et la même
chose sur Android.
Maintenant, bien sûr, sur iOS, cela ne semble pas vraiment bon,
là je voudrais garder la valeur par défaut et la solution est
assez simple, nous pouvons à nouveau utiliser la bonne ancienne API de la plate-forme, l'importer puis ici lors de
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,
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.
Et avec cela, nous avons ici le même look qu'avant que j'aime sur iOS mais bien
sûr, vous pouvez également
affiner cela selon vos besoins et sur Android, nous aurons toujours le look que nous avons vu auparavant, si je vais dans
le filtre écran ici qui semble bien là aussi. Voilà donc le commutateur et comment nous pouvons
l'ajouter, maintenant nous avons juste besoin de répéter cela pour tous nos autres
commutateurs, donc tous les autres filtres, je veux dire. Je peux donc copier cette vue et l'ajouter
à nouveau
sans lactose ou végétalien, mais si vous vous retrouvez à copier et coller encore et
encore comme nous essayons de le faire ici, c'est toujours un bon cas pour créer un composant séparé ou un fonction
qui rend ce code réutilisable.
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
là-dedans, encore
une fois, vous pouvez également opter pour un fichier séparé si vous le souhaitez.
Je vais le nommer commutateur de filtre et cela obtient quelques accessoires et
dans ce composant, à la fin je retourne ce code, nous avons configuré un pour la vue et le texte et ainsi de
suite
et bien sûr maintenant le texte doit être dynamique. Là, nous pourrions définir cela sur l'étiquette des accessoires et
c'est à vous de décider ce que vous choisissez ici, car vous serez celui qui passera les valeurs des
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.
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
onValueChange, je vais simplement pointer sur les accessoires. onChange par exemple, mais encore une fois, tous ces
noms d'accessoires sont entièrement à vous, car vous serez celui qui utilise ce composant
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
accessoire d'étiquette ici, si vous l'avez nommé différemment, vous devez le
nommer différemment ici bien sûr
et l'étiquette est bien sûr GlutenFree parce que je suis sur le point de remplacer ce commutateur ici.
Ensuite, nous devons passer dans un état parce que j'ai ajouté un accessoire d'état ici pour gérer ma valeur,
si vous l'avez nommé différemment, vous devez également le nommer différemment
là-bas et ici je pointerai sur isGlutenFree, sur mon
état et sur les besoins
de changement à fournir car ici j'utilise l'accessoire onChange pour le lier à onValueChange.
Donc, cela devrait pointer vers une fonction et bien sûr ici, je vais simplement garder cette fonction
ici et puisque j'utilise juste onChange ici pour la transmettre à onValueChange, nous obtenons le nouvel argument de valeur ici également.
Maintenant, nous pouvons nous débarrasser de cette vue là-bas et utiliser simplement notre composant de commutateur de filtre et maintenant simplement
répéter ce qui est bien sûr beaucoup plus facile.
Alors maintenant, ici, nous pouvons également avoir sans lactose, végétalien et végétarien et nous devons
ajouter trois nouveaux états maintenant, alors laissez-moi reproduire ceci, nous avons isLactoseFree et définissons isLactoseFree, ici
nous avons isVegan et définissons isVegan et
ici nous avons isVegetarian et
et définir isVegetarian.
Maintenant, nous devons juste nous assurer d'utiliser les états aux bons endroits, donc pour le deuxième commutateur de filtre
où nous avons le filtre sans lactose, je transmets l'état isLactoseFree et
je mets à jour le jeu isLactoseFree bien sûr. Pour le commutateur végétalien, je transmets
isVegan et nous le mettons à jour avec set isVegan et pour végétarien, nous transmettons isVegetarian et
nous mettons à jour set isVegetarian, comme ceci.
OK,
ça devrait être ça, si nous enregistrons maintenant cela, nous devrions avoir un écran de filtre avec nos différents filtres que nous
pouvons définir indépendamment parce que nous avons des états indépendants. Je pense que ce serait bien
d'avoir un peu d'espacement entre ces lignes, alors implémentons cela. Sur notre conteneur de filtre ici, nous pouvons simplement ajouter
une marge verticale de disons 10 ou 50 peut-être, un peu plus et cela devrait nous assurer que nous avons un
certain espacement là-bas,
oui et cela a l'air plutôt sympa.