Nous avons donc examiné en détail les dimensions, les orientations et le rendu de différents styles et mises en page en fonction
de la largeur et de la hauteur disponibles et également comment réagir aux changements de largeur et de hauteur lorsque
vous faites pivoter l'appareil, par exemple, des choses très importantes.
Voyons maintenant comment vous pouvez réellement rendre différents styles ou mises en page ou tout ce que vous voulez
en fonction de la plate-forme sur laquelle vous exécutez.
À l'heure actuelle, nous avons essentiellement une application identique sur iOS et Android, à une exception près, et c'est
notre bouton ici.
Les boutons sont différents parce que le composant bouton que nous utilisons est un composant intégré à React Native et
c'est l'un des très rares, en fait le seul composant proposé par React Native qui s'ajuste automatiquement en fonction de la plate-forme sur laquelle votre application
s'exécute, pas d'autre Le composant fait vraiment cela, mais bien
sûr, vous pouvez écrire du code pour ajuster vos styles, votre logique de mise en page, tout ce que vous voulez en fonction
de la plate-forme sur laquelle vous exécutez. Pour voir un exemple, allons à notre
composant d'en-tête et là, travaillons sur la façon dont
nous présentons cet en-tête. Sur Android, nous pourrions
avoir cette couleur d'arrière-plan, puis du texte devant, sur iOS, nous pourrions vouloir
avoir une couleur d'arrière-plan blanc et n'avoir qu'une fine bordure en bas et avoir à la place
le texte dans notre couleur principale, ce
serait un un look iOS plus typique après tout.
Maintenant, pour savoir sur quelle plate-forme vous utilisez, React Native vous a couvert, il a l'objet de plate-forme où
les dimensions vous aident à connaître les dimensions de l'appareil sur lequel vous exécutez, la
plate-forme vous aide à trouver la plate-forme de l'appareil vous courez.
Alors maintenant, ici, dans les styles que vous créiez,
nous pourrions rendre une couleur d'arrière-plan différente en fonction de cela.
Nous pouvons utiliser la plate-forme et maintenant là, vous avez quelques propriétés
que vous pouvez utiliser et par exemple, vous avez la propriété OS et OS est fondamentalement le système d'exploitation et c'est
l'une des
valeurs que vous voyez ici, surtout iOS ou Android.
Donc, ici, nous pouvons vérifier si cela est égal à disons Android et dans ce cas, j'ai défini ma
couleur d'arrière-plan sur les
couleurs primaires, mais si ce n'est pas Android et donc si c'est iOS, je l'ai défini comme disons blanc.
Maintenant, si nous le faisons et que nous l'enregistrons, nous voyons un en-tête blanc ici sur l'appareil iOS et un en-tête
coloré sur l'appareil Android.
Maintenant, bien sûr, vous n'avez pas besoin de configurer d'écouteur sur la plate-forme et il n'offre pas non plus une telle fonctionnalité
car la plate-forme ne peut pas changer pendant que l'application est en cours d'exécution, c'est le même système
d'exploitation tout le temps bien sûr.
Terminons maintenant le style pour iOS.
J'ai dit que je voulais avoir une bordure fine en bas, donc nous pouvons ajouter une couleur
de fond de bordure et vérifier la plate-forme et si le système d'exploitation y est égal à iOS, alors je veux
définir la couleur de fond de bordure pour dire ce grisâtre couleur, sinon je l'enverrai
au blanc ou au transparent en fait afin que nous ne puissions pas le voir sur Android et ajouter un fond
de bordure avec disons et là nous faisons également cette vérification pour iOS de disons un pixel sur iOS et zéro sur Android.
Alors maintenant, nous ne devrions rien voir sur Android, mais nous avons cette fine bordure ici sur iOS.
Enfin, colorions le texte en allant au texte du titre ici et le texte du titre fusionne en effet dans tous les styles que nous définissons sur l'accessoire de
style, donc ici sur le texte du titre, nous
pouvons ajouter un accessoire de style et pointer sur les styles. titre ici ou comme vous voulez le
nommer et ajoutez un tel objet de style de titre ici dans notre feuille de style où
nous définissons la couleur qui est la couleur du texte également basée sur la plate-forme.
Si c'est iOS, disons que nous définissons cela sur des couleurs. primaire et sinon, mettons-le sur blanc, il était
noir
avant, mettons-le maintenant sur blanc.
Maintenant, nous avons un titre blanc ici sur Android mais un titre coloré ici sur iOS et c'est ainsi que vous pouvez facilement définir différents
styles en fonction de la plate-forme sur laquelle vous utilisez, comme vous pouvez
le voir.