1 00:00:02,230 --> 00:00:08,380 Nous avons donc examiné en détail les dimensions, les orientations et le rendu de différents styles et mises en page en fonction 2 00:00:08,380 --> 00:00:14,030 de la largeur et de la hauteur disponibles et également comment réagir aux changements de largeur et de hauteur lorsque 3 00:00:14,080 --> 00:00:17,010 vous faites pivoter l'appareil, par exemple, des choses très importantes. 4 00:00:17,680 --> 00:00:22,900 Voyons maintenant comment vous pouvez réellement rendre différents styles ou mises en page ou tout ce que vous voulez 5 00:00:23,080 --> 00:00:25,660 en fonction de la plate-forme sur laquelle vous exécutez. 6 00:00:25,660 --> 00:00:31,120 À l'heure actuelle, nous avons essentiellement une application identique sur iOS et Android, à une exception près, et c'est 7 00:00:31,120 --> 00:00:32,240 notre bouton ici. 8 00:00:32,320 --> 00:00:38,320 Les boutons sont différents parce que le composant bouton que nous utilisons est un composant intégré à React Native et 9 00:00:38,320 --> 00:00:46,060 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 10 00:00:46,060 --> 00:00:49,310 s'exécute, pas d'autre Le composant fait vraiment cela, mais bien 11 00:00:49,390 --> 00:00:56,290 sûr, vous pouvez écrire du code pour ajuster vos styles, votre logique de mise en page, tout ce que vous voulez en fonction 12 00:00:56,320 --> 00:01:01,000 de la plate-forme sur laquelle vous exécutez. Pour voir un exemple, allons à notre 13 00:01:01,000 --> 00:01:04,170 composant d'en-tête et là, travaillons sur la façon dont 14 00:01:04,180 --> 00:01:08,020 nous présentons cet en-tête. Sur Android, nous pourrions 15 00:01:08,020 --> 00:01:12,810 avoir cette couleur d'arrière-plan, puis du texte devant, sur iOS, nous pourrions vouloir 16 00:01:12,820 --> 00:01:19,240 avoir une couleur d'arrière-plan blanc et n'avoir qu'une fine bordure en bas et avoir à la place 17 00:01:19,240 --> 00:01:21,750 le texte dans notre couleur principale, ce 18 00:01:21,760 --> 00:01:25,270 serait un un look iOS plus typique après tout. 19 00:01:25,360 --> 00:01:31,810 Maintenant, pour savoir sur quelle plate-forme vous utilisez, React Native vous a couvert, il a l'objet de plate-forme où 20 00:01:32,110 --> 00:01:37,630 les dimensions vous aident à connaître les dimensions de l'appareil sur lequel vous exécutez, la 21 00:01:37,630 --> 00:01:41,750 plate-forme vous aide à trouver la plate-forme de l'appareil vous courez. 22 00:01:41,910 --> 00:01:45,270 Alors maintenant, ici, dans les styles que vous créiez, 23 00:01:45,270 --> 00:01:48,660 nous pourrions rendre une couleur d'arrière-plan différente en fonction de cela. 24 00:01:48,810 --> 00:01:53,310 Nous pouvons utiliser la plate-forme et maintenant là, vous avez quelques propriétés 25 00:01:53,310 --> 00:02:01,170 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 26 00:02:01,170 --> 00:02:02,220 l'une des 27 00:02:02,220 --> 00:02:05,670 valeurs que vous voyez ici, surtout iOS ou Android. 28 00:02:05,700 --> 00:02:12,000 Donc, ici, nous pouvons vérifier si cela est égal à disons Android et dans ce cas, j'ai défini ma 29 00:02:12,000 --> 00:02:13,570 couleur d'arrière-plan sur les 30 00:02:13,770 --> 00:02:20,130 couleurs primaires, mais si ce n'est pas Android et donc si c'est iOS, je l'ai défini comme disons blanc. 31 00:02:20,130 --> 00:02:28,800 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 32 00:02:28,980 --> 00:02:31,090 coloré sur l'appareil Android. 33 00:02:31,260 --> 00:02:36,960 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é 34 00:02:37,140 --> 00:02:42,090 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 35 00:02:42,090 --> 00:02:43,800 d'exploitation tout le temps bien sûr. 36 00:02:43,830 --> 00:02:46,240 Terminons maintenant le style pour iOS. 37 00:02:46,650 --> 00:02:53,340 J'ai dit que je voulais avoir une bordure fine en bas, donc nous pouvons ajouter une couleur 38 00:02:53,340 --> 00:03:01,410 de fond de bordure et vérifier la plate-forme et si le système d'exploitation y est égal à iOS, alors je veux 39 00:03:01,410 --> 00:03:07,950 définir la couleur de fond de bordure pour dire ce grisâtre couleur, sinon je l'enverrai 40 00:03:07,980 --> 00:03:16,350 au blanc ou au transparent en fait afin que nous ne puissions pas le voir sur Android et ajouter un fond 41 00:03:16,770 --> 00:03:25,590 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. 42 00:03:25,590 --> 00:03:31,410 Alors maintenant, nous ne devrions rien voir sur Android, mais nous avons cette fine bordure ici sur iOS. 43 00:03:31,530 --> 00:03:39,530 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 44 00:03:39,590 --> 00:03:42,400 style, donc ici sur le texte du titre, nous 45 00:03:42,770 --> 00:03:48,950 pouvons ajouter un accessoire de style et pointer sur les styles. titre ici ou comme vous voulez le 46 00:03:48,960 --> 00:03:55,440 nommer et ajoutez un tel objet de style de titre ici dans notre feuille de style où 47 00:03:55,860 --> 00:04:01,380 nous définissons la couleur qui est la couleur du texte également basée sur la plate-forme. 48 00:04:01,770 --> 00:04:08,970 Si c'est iOS, disons que nous définissons cela sur des couleurs. primaire et sinon, mettons-le sur blanc, il était 49 00:04:08,970 --> 00:04:09,830 noir 50 00:04:09,840 --> 00:04:11,700 avant, mettons-le maintenant sur blanc. 51 00:04:11,700 --> 00:04:18,990 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 52 00:04:18,990 --> 00:04:22,600 styles en fonction de la plate-forme sur laquelle vous utilisez, comme vous pouvez 53 00:04:22,620 --> 00:04:23,400 le voir.