1
00:00:02,330 --> 00:00:06,200
Maintenant, il peut parfois être fastidieux d'ajouter un tas de ces

2
00:00:06,200 --> 00:00:09,920
contrôles et ici nous avons déjà trois contrôles sur l'en-tête

3
00:00:09,920 --> 00:00:14,070
par exemple, certainement quelque chose que nous pouvons ajouter mais peut-être pas optimal.

4
00:00:14,480 --> 00:00:22,970
Au lieu de cela, pour garder nos objets de style plus propres, nous pourrions configurer un en-tête de base

5
00:00:23,360 --> 00:00:37,110
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

6
00:00:37,110 --> 00:00:39,600
hors du style de base,

7
00:00:39,860 --> 00:00:44,830
ajoutez-les ici à headerIOS et headerAndroid et sur headerIOS, nous ne

8
00:00:44,970 --> 00:00:51,020
gardons que le look iOS ici, donc blanc, puis cette couleur pour la

9
00:00:56,160 --> 00:01:04,100
bordure en bas et une largeur de pixel d'une pour cette bordure et ici sur Android, nous supprimons

10
00:01:04,200 --> 00:01:13,200
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

11
00:01:13,200 --> 00:01:19,800
en utilisant ces valeurs ou en les supprimant entièrement et en ne les définissant pas

12
00:01:19,800 --> 00:01:20,970
du tout.

13
00:01:20,970 --> 00:01:28,590
Maintenant, nous devons simplement nous assurer d'ajouter headerIOS ou headerAndroid et pour cela, nous pouvons monter ici et configurer

14
00:01:28,690 --> 00:01:35,050
notre objet styles où nous fusionnons maintenant dans tous nos styles de base d'en-tête, donc ceux-ci

15
00:01:35,070 --> 00:01:45,500
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

16
00:01:45,500 --> 00:01:54,770
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

17
00:01:54,770 --> 00:02:02,270
nous sommes sur iOS qui est des styles. headerIOS et ajoutez une clé Android et pointez sur les

18
00:02:02,270 --> 00:02:05,310
styles que headerAndroid et avec ce que

19
00:02:05,540 --> 00:02:12,380
nous disons à React Native, veuillez fusionner dans les propriétés de la valeur, dans ce cas, un objet

20
00:02:12,380 --> 00:02:15,680
que nous sélectionnons pour iOS et pour Android.

21
00:02:15,680 --> 00:02:21,410
Vous devrez donc toujours passer un objet à la sélection de plate-forme, puis vous aurez différentes valeurs pour iOS et

22
00:02:21,410 --> 00:02:26,390
Android et la valeur ici pourrait également être un nombre, ne fonctionnerait pas ici car ici, nous

23
00:02:26,390 --> 00:02:32,350
attendons réellement un objet afin que nous puissions sortez toutes les paires de valeurs de propriété et passez-les à notre style environnant.

24
00:02:32,360 --> 00:02:37,310
Donc, ici, un nombre n'a pas de sens, mais vous pouvez utiliser select avec n'importe quel type de

25
00:02:37,370 --> 00:02:38,960
valeur, ici nous avons juste

26
00:02:39,020 --> 00:02:45,410
besoin d'un objet, donc nous pointons les objets headerIOS et headerAndroid. Et avec cela, nous avons du code plus léger, nous

27
00:02:45,680 --> 00:02:51,110
avons des styles plus légers là-bas, puis nous avons du code avec un style de base où nous utilisons

28
00:02:51,110 --> 00:02:57,230
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

29
00:02:57,230 --> 00:03:04,760
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

30
00:03:04,760 --> 00:03:11,360
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,

31
00:03:11,480 --> 00:03:14,780
ce qui n'est pas horrible mais qui pourrait ne pas être ce que nous voulons.

32
00:03:15,590 --> 00:03:21,590
Si nous allons à notre MainButton. fichier js, nous voyons que nous utilisons toujours l'opacité tactile ici mais en

33
00:03:21,590 --> 00:03:23,940
fait sur Android, nous pourrions vouloir utiliser l'effet d'entraînement.

34
00:03:23,990 --> 00:03:30,740
Heureusement, React Native a le composant de rétroaction tactile tactile intégré qui nous donne en fait un

35
00:03:30,740 --> 00:03:33,830
objet tactile qui a un effet d'entraînement

36
00:03:33,920 --> 00:03:38,730
intégré, nous voulons donc l'utiliser sur Android et l'opacité tactile sur iOS.

37
00:03:38,810 --> 00:03:44,300
Maintenant, bien sûr, nous pouvons utiliser l'API de la plate-forme que nous devons donc également importer à partir

38
00:03:44,330 --> 00:03:47,510
de React Native pour utiliser un composant différent ici basé

39
00:03:47,630 --> 00:03:52,520
sur la plate-forme et pour cela, nous pouvons utiliser une fonctionnalité vraiment intéressante que React n'a

40
00:03:52,520 --> 00:03:54,200
pas spécifique à React Native

41
00:03:54,290 --> 00:04:00,200
mais nous pouvons utiliser dans React en général, nous pouvons configurer une variable qui commence par un caractère majuscule afin

42
00:04:00,230 --> 00:04:07,430
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

43
00:04:07,490 --> 00:04:12,170
bouton disons, le nom dépend entièrement de vous et par défaut, c'est l'opacité du toucher.

44
00:04:12,170 --> 00:04:19,730
Donc, je pointe ici l'objet d'opacité tactile, sans crochets angulaires, en le pointant simplement comme ceci.

45
00:04:19,730 --> 00:04:27,350
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

46
00:04:27,350 --> 00:04:29,230
important, vérifier également autre

47
00:04:29,240 --> 00:04:37,210
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

48
00:04:37,230 --> 00:04:40,040
21 ou supérieure prend en charge l'effet d'entraînement.

49
00:04:40,100 --> 00:04:46,130
Donc, si les deux sont vrais, nous allons définir le composant bouton sur un retour natif tactile, nous utiliserons

50
00:04:46,130 --> 00:04:50,480
donc celui avec l'effet d'entraînement, sinon nous utiliserons celui avec l'effet d'opacité.

51
00:04:50,600 --> 00:04:56,930
Donc, si nous sommes sur Android et que la version Android est suffisamment élevée, elle est de 21

52
00:04:56,930 --> 00:05:03,350
ou plus, alors nous utilisons des commentaires natifs tactiles. Maintenant, parce que je nomme cela avec un caractère de départ majuscule, nous

53
00:05:03,350 --> 00:05:12,260
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,

54
00:05:12,500 --> 00:05:22,640
vous verrez maintenant ici que vous avez cet effet d'entraînement, vous pouvez le voir si nous maintenons enfoncé, vous voyez

55
00:05:22,640 --> 00:05:29,450
cet effet d'entraînement sur le bouton. Cela n'a pas encore l'air parfait car il est en fait

56
00:05:29,450 --> 00:05:33,350
rectangulaire et ne respecte pas notre rayon de bordure et nous allons corriger

57
00:05:33,350 --> 00:05:40,340
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.

58
00:05:40,340 --> 00:05:47,990
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

59
00:05:47,990 --> 00:05:51,780
hack, une petite solution de contournement dont vous devez être conscient.

60
00:05:52,010 --> 00:05:57,490
Nous enveloppons cela avec une autre vue où je définis un style de disons

61
00:05:58,480 --> 00:06:07,430
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é

62
00:06:07,430 --> 00:06:08,640
autour de tout,

63
00:06:08,780 --> 00:06:17,910
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

64
00:06:18,000 --> 00:06:25,320
caché, ce qui signifie que tout composant enfant qui dépasserait les limites de ces composants, donc du composant avec ce

65
00:06:25,320 --> 00:06:31,170
style est essentiellement coupé et cela garantira que l'effet d'entraînement qui est maintenant un le

66
00:06:31,170 --> 00:06:36,670
composant enfant de cette vue sera découpé sur les bords arrondis de ce bouton.

67
00:06:37,210 --> 00:06:44,070
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

68
00:06:44,070 --> 00:06:50,200
qui bien sûr est bien meilleur et sur iOS bien sûr, nous avons toujours le même comportement qu'auparavant.

69
00:06:51,070 --> 00:06:55,750
Donc, utiliser la plate-forme ici dans une vérification if est également quelque chose que nous pouvons faire,

70
00:06:55,780 --> 00:07:01,180
mais nous pouvons également utiliser cette astuce pour rendre des composants totalement différents en fonction de la plate-forme sur laquelle

71
00:07:01,180 --> 00:07:01,780
nous fonctionnons.