1
00:00:02,200 --> 00:00:04,720
Il y a quelques choses où nous

2
00:00:04,740 --> 00:00:08,950
pourrions continuer, mais je veux continuer avec le conteneur d'entrée, qui est le conteneur autour

3
00:00:08,980 --> 00:00:15,340
de ces entrées, donc autour du texte de sélection d'un nombre, autour du texte saisi ici et autour des boutons et ce

4
00:00:15,340 --> 00:00:18,970
conteneur a un largeur et il aligne les éléments mais comme je l'ai

5
00:00:18,970 --> 00:00:21,820
décrit plus tôt, ce serait bien d'avoir cette carte pour

6
00:00:21,820 --> 00:00:27,410
y regarder et pour cela, nous avons besoin de styles plus exotiques qui semblent vraiment fantaisistes mais simplement de

7
00:00:27,410 --> 00:00:30,450
quelques règles de style que nous n'avons pas utilisées auparavant.

8
00:00:30,470 --> 00:00:34,080
Par exemple, je veux ajouter une ombre, une légère ombre

9
00:00:34,110 --> 00:00:43,310
portée et vous le faites avec quatre propriétés principales que vous pouvez utiliser. Une couleur, un décalage, une opacité et un rayon.

10
00:00:43,310 --> 00:00:46,760
Maintenant, une couleur d'ombre doit être claire, c'est la couleur de votre ombre.

11
00:00:46,760 --> 00:00:50,210
Le décalage de l'ombre est le décalage par rapport à votre conteneur

12
00:00:50,210 --> 00:00:54,290
et cela prend réellement l'objet qui à son tour prend une largeur et une hauteur,

13
00:00:54,290 --> 00:00:59,390
vous pouvez donc dire que je veux compenser l'ombre de deux pixels par rapport à la largeur et de

14
00:00:59,390 --> 00:01:07,220
deux pixels par rapport à la hauteur , qui influence l'effet tridimensionnel que vous créez. L'opacité décrit la transparence de cette ombre, si vous définissez l'opacité

15
00:01:07,280 --> 00:01:08,990
sur 1, vous avez

16
00:01:08,990 --> 00:01:15,950
alors une ombre totalement transparente, donc une ombre forte très visible et si vous augmentez ou diminuez ce que je

17
00:01:15,950 --> 00:01:21,800
devrais dire, si vous la définissez sur 0. 1 par exemple, vous avez

18
00:01:21,950 --> 00:01:28,910
une ombre que vous pouvez à peine voir. Le rayon de l'ombre décrit ensuite la netteté de cette ombre,

19
00:01:28,910 --> 00:01:29,280
si

20
00:01:29,300 --> 00:01:35,290
elle a des bords rugueux ou si elle est un peu plus floue, plus douce, des choses comme ça.

21
00:01:35,330 --> 00:01:40,610
Donc ici, je vais utiliser une couleur d'ombre noire, en passant, vous pouvez également utiliser des codes hexadécimaux

22
00:01:40,610 --> 00:01:47,720
ici si vous le souhaitez et vous pouvez également utiliser des codes RGBA si vous préférez, soit des codes RVB normaux en fait, soit également

23
00:01:47,870 --> 00:01:53,270
avec un alpha canal pour décrire la transparence ici. Bien que la transparence ici n'aura pas d'influence directe,

24
00:01:53,270 --> 00:01:59,030
pour l'ombre, vous devrez la définir avec l'opacité de l'ombre. Pour les autres couleurs, cela aurait une influence

25
00:01:59,030 --> 00:02:04,100
mais ce n'est qu'une note secondaire. Ci-joint, vous trouverez un lien avec plus de détails

26
00:02:04,100 --> 00:02:09,260
sur la façon dont vous pouvez configurer les couleurs et les valeurs de couleur acceptées par React Native, car évidemment, c'est

27
00:02:09,260 --> 00:02:14,030
beaucoup plus exhaustif que ce que je peux montrer ici, je vais simplement choisir le nom parce que je

28
00:02:14,030 --> 00:02:20,420
veux un noir couleur, alors pourquoi ne pas opter pour ce raccourci? Maintenant, outre la couleur, l'ombre ici recevra également un décalage

29
00:02:20,510 --> 00:02:23,990
et, comme je l'ai dit, le décalage prend ici un objet.

30
00:02:23,990 --> 00:02:31,040
Maintenant, au cas où vous vous demanderiez comment je le sais, pour celui que mon IDE me dit, si je commence à taper le décalage

31
00:02:31,040 --> 00:02:36,530
d'ombre ici, vous voyez cet indice que je reçois à droite, vous devriez normalement l'obtenir également, mais au cas

32
00:02:36,530 --> 00:02:42,830
où vous ne le feriez pas obtenez ceci, les documents officiels sont bien sûr l'endroit où aller et là, toujours sous les guides,

33
00:02:42,830 --> 00:02:49,100
les composants et les API, vous pouvez cliquer sur le composant de vue là-bas ou simplement cliquer sur les documents d'API ici

34
00:02:49,100 --> 00:02:57,800
dans le coin supérieur droit puis choisir votre vue ici et là, vous trouverez un accessoire de style, puis vous pouvez trouver une liste de tous les styles de vue qui

35
00:02:57,860 --> 00:03:03,890
sont pris en charge et bien sûr aussi comment vous les configurez et là par exemple, vous avez appris que le décalage

36
00:03:03,890 --> 00:03:10,040
d'ombre est un objet avec un nombre et une hauteur. Pour la couleur, vous avez appris que cela prend une

37
00:03:10,040 --> 00:03:14,630
couleur et c'est exactement le lien que vous trouvez ci-joint, où il décrit le type

38
00:03:14,630 --> 00:03:16,740
de couleurs que vous pouvez utiliser.

39
00:03:17,030 --> 00:03:24,020
Voilà donc juste une petite note latérale, ici je vais utiliser un décalage d'ombre avec une largeur de zéro

40
00:03:24,020 --> 00:03:32,030
mais une hauteur de 2 afin que mon ombre soit décalée un peu vers le bas pour ainsi dire, pas tellement vers la

41
00:03:32,030 --> 00:03:40,310
droite, donc pas du tout à droite en fait et j'ajouterai ensuite un rayon d'ombre qui est un certain nombre d'essayons six et

42
00:03:40,310 --> 00:03:41,870
voyons ce que cela

43
00:03:42,650 --> 00:03:49,970
fait et enfin et surtout, une opacité d'ombre de 0. 26 qui est relativement transparent mais qui me

44
00:03:49,970 --> 00:03:51,610
semble plutôt sympa.

45
00:03:51,850 --> 00:03:58,480
De plus, je donnerai à mon conteneur d'entrée une couleur d'arrière-plan blanche pour m'assurer qu'il est toujours blanc et non transparent,

46
00:03:58,480 --> 00:04:03,370
ce qui est sinon la valeur par défaut, de sorte que si nous aurions

47
00:04:03,370 --> 00:04:08,890
une autre couleur d'arrière-plan derrière le conteneur, disons comme couleur de base de l'écran entier, le conteneur

48
00:04:08,920 --> 00:04:11,100
ici aurait toujours un fond blanc.

49
00:04:11,140 --> 00:04:16,180
Maintenant, avec cela, si vous enregistrez cela, vous devriez voir une ombre qui ressemble à ceci

50
00:04:16,180 --> 00:04:20,190
sur iOS mais vous ne voyez aucune ombre sur Android et ce

51
00:04:20,410 --> 00:04:28,120
n'est pas un bug, mais les propriétés de l'ombre ici ne fonctionnent que sur iOS et cela laisse une importante question, comment pouvez-vous

52
00:04:28,120 --> 00:04:32,820
définir une ombre sur Android alors? N'est-ce pas possible?

53
00:04:33,070 --> 00:04:39,610
C'est là que vous avez un accessoire de style spécial, l'accessoire d'élévation. Cela ne fonctionne que sur Android comme l'info-bulle montre également

54
00:04:39,610 --> 00:04:48,280
ici, la plate-forme Android tandis que les propriétés de l'ombre ne fonctionnent que sur iOS. Maintenant, l'élévation prend simplement un certain nombre de disons 5, puis

55
00:04:48,280 --> 00:04:55,090
utilise l'élévation de conception de matériau Android par défaut, vous avez donc moins de contrôle, mais d'autre part,

56
00:04:55,090 --> 00:05:00,130
vous obtenez l'apparence de conception de matériau par défaut à laquelle vos utilisateurs pourraient

57
00:05:00,130 --> 00:05:06,070
être habitués de toute façon, c'est donc la bonne chose à ce sujet et maintenant nous

58
00:05:06,340 --> 00:05:13,590
avons également une ombre ici sur Android et iOS. Sur iOS, vous remarquerez également que l'ombre est également visible à

59
00:05:13,590 --> 00:05:19,840
gauche et à droite de la boîte, même si je lui ai donné un décalage d'ombre de 0 pour la largeur,

60
00:05:19,840 --> 00:05:25,480
qui peut cependant être contrôlé avec le rayon d'ombre, si vous définissez l'ombre rayon à zéro, alors vous

61
00:05:25,480 --> 00:05:30,970
voyez que vous n'avez que l'ombre où vous avez défini son décalage ici, vous pouvez donc vous assurer

62
00:05:30,970 --> 00:05:37,060
que l'ombre n'est vraiment là où vous le souhaitez. Si vous définissez un rayon d'ombre cependant et par défaut, il

63
00:05:37,060 --> 00:05:41,350
y a aussi un rayon d'ombre par défaut, vous obtenez cet effet de déversement qui est une ombre

64
00:05:41,350 --> 00:05:47,860
plus naturelle après tout, donc ici c'est en fait l'effet que je veux. Maintenant, avec cela, j'ai ajouté une ombre à la fois sur Android

65
00:05:47,920 --> 00:05:53,500
en utilisant l'ombre Android par défaut et sur iOS. Soit dit en passant sur Android, vous pouvez bien

66
00:05:53,500 --> 00:05:59,950
sûr modifier le niveau d'élévation pour jouer avec différents niveaux d'élévation jusqu'à ce que vous ayez l'apparence que vous souhaitez pour

67
00:05:59,950 --> 00:06:05,530
votre application, vous avez suffisamment d'ombre en gros. Maintenant, en plus d'avoir l'ombre ici, je

68
00:06:05,530 --> 00:06:11,680
pense que ce serait bien d'avoir un peu de rembourrage dans cette boîte maintenant parce que les articles sont

69
00:06:11,680 --> 00:06:20,350
trop près des bords, ils sont assis directement sur les bords après tout. Donc, pour changer cela, je vais également ajouter un peu de rembourrage

70
00:06:20,350 --> 00:06:26,440
ici et ce sera un rembourrage de 20 et encore, c'est une valeur que vous pouvez expérimenter, trouver

71
00:06:26,440 --> 00:06:33,910
le rembourrage que vous préférez personnellement et vous pensez que cela semble bon et si nous essayons cela, maintenant cela semble beaucoup mieux.

72
00:06:33,970 --> 00:06:36,700
De plus, les coins arrondis

73
00:06:37,120 --> 00:06:45,870
seraient une bonne chose, donc j'ajouterai ici un rayon de bordure de disons 10 pour avoir des bordures légèrement arrondies.

74
00:06:45,870 --> 00:06:52,940
Si nous enregistrons maintenant cela, cela me semble assez agréable sur les deux plates-formes, sur les deux appareils.

75
00:06:52,940 --> 00:06:54,740
Donc, c'est maintenant le conteneur d'entrée,

76
00:06:54,770 --> 00:06:58,570
nous ne pouvons pas voir l'entrée et les boutons devraient probablement avoir la même taille

77
00:06:58,820 --> 00:07:00,950
également, mais au moins, le conteneur semble maintenant bien.