Maintenant, il peut parfois être fastidieux d'ajouter un tas de ces
contrôles et ici nous avons déjà trois contrôles sur l'en-tête
par exemple, certainement quelque chose que nous pouvons ajouter mais peut-être pas optimal.
Au lieu de cela, pour garder nos objets de style plus propres, nous pourrions configurer un en-tête de base
ici, par exemple une base d'en-tête, puis ajouter headerIOS et headerAndroid et maintenant ce que nous faisons, c'est que nous prenons tous ces styles qui changent en fonction de la plate-forme
hors du style de base,
ajoutez-les ici à headerIOS et headerAndroid et sur headerIOS, nous ne
gardons que le look iOS ici, donc blanc, puis cette couleur pour la
bordure en bas et une largeur de pixel d'une pour cette bordure et ici sur Android, nous supprimons
cette vérification et garder la couleur primaire comme couleur de fond et d'un autre côté, nous nous débarrassons de notre bordure
en utilisant ces valeurs ou en les supprimant entièrement et en ne les définissant pas
du tout.
Maintenant, nous devons simplement nous assurer d'ajouter headerIOS ou headerAndroid et pour cela, nous pouvons monter ici et configurer
notre objet styles où nous fusionnons maintenant dans tous nos styles de base d'en-tête, donc ceux-ci
sont toujours définis mais maintenant en plus, nous peut fusionner dans le résultat de la sélection de plate-forme qui est maintenant une méthode qui prend un
objet où nous devons spécifier une clé iOS et pointer sur la valeur ou dans ce cas, l'objet que nous voulons utiliser si
nous sommes sur iOS qui est des styles. headerIOS et ajoutez une clé Android et pointez sur les
styles que headerAndroid et avec ce que
nous disons à React Native, veuillez fusionner dans les propriétés de la valeur, dans ce cas, un objet
que nous sélectionnons pour iOS et pour Android.
Vous devrez donc toujours passer un objet à la sélection de plate-forme, puis vous aurez différentes valeurs pour iOS et
Android et la valeur ici pourrait également être un nombre, ne fonctionnerait pas ici car ici, nous
attendons réellement un objet afin que nous puissions sortez toutes les paires de valeurs de propriété et passez-les à notre style environnant.
Donc, ici, un nombre n'a pas de sens, mais vous pouvez utiliser select avec n'importe quel type de
valeur, ici nous avons juste
besoin d'un objet, donc nous pointons les objets headerIOS et headerAndroid. Et avec cela, nous avons du code plus léger, nous
avons des styles plus légers là-bas, puis nous avons du code avec un style de base où nous utilisons
ensuite la sélection de plate-forme pour choisir dynamiquement différents styles en fonction de la plate-forme sur laquelle nous fonctionnons et donc
maintenant, nous avons le même look qu'avant mais maintenant d'une manière plus élégante. Un autre endroit de notre application où nous pourrions
en profiter est notre bouton principal ici. Notre bouton principal a la même apparence et la même sensation sur les deux plates-formes,
ce qui n'est pas horrible mais qui pourrait ne pas être ce que nous voulons.
Si nous allons à notre MainButton. fichier js, nous voyons que nous utilisons toujours l'opacité tactile ici mais en
fait sur Android, nous pourrions vouloir utiliser l'effet d'entraînement.
Heureusement, React Native a le composant de rétroaction tactile tactile intégré qui nous donne en fait un
objet tactile qui a un effet d'entraînement
intégré, nous voulons donc l'utiliser sur Android et l'opacité tactile sur iOS.
Maintenant, bien sûr, nous pouvons utiliser l'API de la plate-forme que nous devons donc également importer à partir
de React Native pour utiliser un composant différent ici basé
sur la plate-forme et pour cela, nous pouvons utiliser une fonctionnalité vraiment intéressante que React n'a
pas spécifique à React Native
mais nous pouvons utiliser dans React en général, nous pouvons configurer une variable qui commence par un caractère majuscule afin
de pouvoir l'utiliser comme élément jsx car seules les variables de caractère majuscule peuvent être utilisées comme éléments jsx et nous nommons ce composant
bouton disons, le nom dépend entièrement de vous et par défaut, c'est l'opacité du toucher.
Donc, je pointe ici l'objet d'opacité tactile, sans crochets angulaires, en le pointant simplement comme ceci.
Maintenant, nous pouvons ajouter une vérification if et vérifier si le système d'exploitation de la plate-forme est égal à Android et
important, vérifier également autre
chose sur la plate-forme, vérifier également si la version de la plate-forme est supérieure ou égale à 21 car seule l'API Android version
21 ou supérieure prend en charge l'effet d'entraînement.
Donc, si les deux sont vrais, nous allons définir le composant bouton sur un retour natif tactile, nous utiliserons
donc celui avec l'effet d'entraînement, sinon nous utiliserons celui avec l'effet d'opacité.
Donc, si nous sommes sur Android et que la version Android est suffisamment élevée, elle est de 21
ou plus, alors nous utilisons des commentaires natifs tactiles. Maintenant, parce que je nomme cela avec un caractère de départ majuscule, nous
pouvons l'utiliser ici au lieu de l'opacité tactile dans notre code jsx, semble étrange au début, mais fonctionnera parfaitement bien. Si nous enregistrons maintenant ceci et que cela redémarre,
vous verrez maintenant ici que vous avez cet effet d'entraînement, vous pouvez le voir si nous maintenons enfoncé, vous voyez
cet effet d'entraînement sur le bouton. Cela n'a pas encore l'air parfait car il est en fait
rectangulaire et ne respecte pas notre rayon de bordure et nous allons corriger
cela mais cela fonctionne et d'autre part ici sur iOS, nous avons l'effet d'opacité comme vous pouvez le dire si vous appuyez sur ceci.
Alors maintenant, fixons le rayon de la bordure et nous pouvons le faire en enveloppant cela avec une autre vue et c'est juste un petit
hack, une petite solution de contournement dont vous devez être conscient.
Nous enveloppons cela avec une autre vue où je définis un style de disons
un conteneur de boutons, ajoutons ce style là-bas dans notre feuille de style et sur ce conteneur de boutons ici qui est maintenant enroulé
autour de tout,
j'ai défini le même rayon de bordure que celui défini sur le bouton , donc 25 dans ce cas ici et j'ajoute un débordement
caché, ce qui signifie que tout composant enfant qui dépasserait les limites de ces composants, donc du composant avec ce
style est essentiellement coupé et cela garantira que l'effet d'entraînement qui est maintenant un le
composant enfant de cette vue sera découpé sur les bords arrondis de ce bouton.
Alors maintenant, si nous enregistrons cela et que nous réessayons, vous verrez que l'effet d'entraînement ne remplit que le bouton, ce
qui bien sûr est bien meilleur et sur iOS bien sûr, nous avons toujours le même comportement qu'auparavant.
Donc, utiliser la plate-forme ici dans une vérification if est également quelque chose que nous pouvons faire,
mais nous pouvons également utiliser cette astuce pour rendre des composants totalement différents en fonction de la plate-forme sur laquelle
nous fonctionnons.