1
00:00:04,540 --> 00:00:11,110
Les styles en ligne sont très faciles à appliquer, mais leur inconvénient est que plus votre application

2
00:00:11,110 --> 00:00:18,260
est complexe et votre configuration devient complexe, plus votre composant est difficile à suivre avec tous ces styles en ligne.

3
00:00:18,370 --> 00:00:24,040
Vous aurez beaucoup de code là-haut, dans votre code jsx et il peut être difficile de le lire, de

4
00:00:24,040 --> 00:00:24,720
le comprendre.

5
00:00:24,870 --> 00:00:27,870
Par conséquent, même si vous pouvez utiliser des styles en ligne,

6
00:00:27,940 --> 00:00:32,740
il est en fait recommandé d'utiliser un objet de feuille de style et c'est exactement ce qui

7
00:00:32,740 --> 00:00:33,820
est créé là-bas.

8
00:00:33,820 --> 00:00:39,120
Cela utilise une feuille de style qui est une classe à la fin fournie par React

9
00:00:39,130 --> 00:00:46,660
Native, c'est pourquoi nous l'importons à partir de là et cela crée à la fin un objet Javascript qui contient toute votre configuration de style.

10
00:00:46,660 --> 00:00:51,940
La différence avec un objet Javascript vanille que vous pouvez également créer vous-même

11
00:00:51,940 --> 00:00:59,590
comme celui-ci est simplement cette feuille de style. create pourrait à l'avenir également appliquer certaines optimisations de performances et appliquer vos

12
00:00:59,590 --> 00:01:01,530
styles plus efficacement à la fin.

13
00:01:01,600 --> 00:01:07,480
Par conséquent, vous devez l'utiliser car vous ne perdez rien, mais à l'avenir,

14
00:01:07,540 --> 00:01:12,190
vous pourriez bénéficier d'optimisations supplémentaires. En ce moment, quand j'enregistre cela, il n'y a pas

15
00:01:12,190 --> 00:01:17,800
de différence, mais encore une fois, vous devez utiliser la feuille de style. créer car cela ne fera pas de mal et vous pourrez

16
00:01:17,800 --> 00:01:22,120
obtenir des optimisations de performances supplémentaires à l'avenir. Un autre avantage de l'utilisation de la feuille

17
00:01:22,120 --> 00:01:28,150
de style est que cela ajoutera automatiquement une certaine validation, ce qui signifie que si vous utilisez une propriété de style incorrecte ou

18
00:01:28,150 --> 00:01:33,550
une valeur incorrecte, React Native le détectera et générera une erreur qui vous permettra simplement de la repérer plus facilement. de

19
00:01:33,550 --> 00:01:35,380
telles erreurs, s'il n'y avait pas

20
00:01:35,470 --> 00:01:39,370
de validation, cela échouerait silencieusement, cela n'appliquerait tout simplement pas le style et vous pourriez

21
00:01:39,370 --> 00:01:45,160
même ne pas le voir instantanément ou vous verrez que le style n'est pas correct mais vous ne voyez pas vraiment pourquoi

22
00:01:45,160 --> 00:01:48,070
cela ne fonctionne pas, donc cette validation intégrée est un autre

23
00:01:48,070 --> 00:01:53,950
avantage de l'utilisation de cet objet de feuille de style ici. Pour créer, vous passez un objet Javascript comme argument, donc

24
00:01:54,040 --> 00:01:56,680
l'argument que vous passez ici est un objet

25
00:01:56,680 --> 00:02:01,450
Javascript et dans cet objet, vous pouvez maintenant définir vos styles et vous ne le

26
00:02:01,450 --> 00:02:07,000
faites pas en ajoutant un remplissage 10 car il serait difficile de savoir où cela devrait être appliqué,

27
00:02:07,000 --> 00:02:08,020
à la

28
00:02:08,020 --> 00:02:15,280
place, vous utilisez n'importe quel nom de propriété de votre choix, comme par exemple écran, pour configurer le style de notre vue d'écran

29
00:02:15,370 --> 00:02:16,810
globale, donc pour ce

30
00:02:16,810 --> 00:02:21,040
niveau supérieur de vous ici et vous auriez pu choisir le nom que vous

31
00:02:21,040 --> 00:02:26,490
voulez ici, ce n'a pas besoin d'être un écran. Ici, vous avez maintenant un objet

32
00:02:26,560 --> 00:02:30,610
Javascript imbriqué, donc la valeur de cette propriété est un autre

33
00:02:30,610 --> 00:02:33,800
objet Javascript et là, vous configurez le remplissage 50

34
00:02:33,820 --> 00:02:37,630
par exemple, donc le style que nous avions là-haut aussi.

35
00:02:37,700 --> 00:02:40,510
Maintenant, nous pouvons supprimer ce style ici, j'ai toujours

36
00:02:40,520 --> 00:02:45,980
la propriété style mais je n'ai plus l'objet de style en ligne et à la place ici, je pointe

37
00:02:46,010 --> 00:02:52,120
maintenant sur les styles qui est cette constante qui contient notre objet de feuille de style, je pointe sur les styles, puis

38
00:02:52,150 --> 00:02:58,430
avec point, je pointe vers le style d'écran et c'est ce que je voulais dire, vous pouvez choisir n'importe quel nom que

39
00:02:58,430 --> 00:03:00,090
vous voulez ici, si vous

40
00:03:00,170 --> 00:03:06,440
auriez nommé cette racine, alors il vous suffirait d'utiliser root là-haut. Ainsi, vous pouvez utiliser n'importe quel nom que vous

41
00:03:06,440 --> 00:03:07,160
voulez, vous

42
00:03:07,160 --> 00:03:12,550
devez simplement vous assurer que les noms que vous utilisez là-bas correspondent aux noms que vous

43
00:03:12,570 --> 00:03:18,540
utilisez ici et indique maintenant à React Native que cette vue devrait obtenir les styles définis pour l'écran là-bas.

44
00:03:18,650 --> 00:03:20,990
Vous pouvez faire de même pour notre conteneur d'entrée, disons,

45
00:03:20,990 --> 00:03:25,860
encore une fois, ce nom dépend entièrement de vous, conteneur d'entrée. Ici, je prendrai cet

46
00:03:25,880 --> 00:03:28,400
objet de style que j'ai appliqué

47
00:03:28,400 --> 00:03:37,130
en tant que style en ligne à cette vue auparavant et je l'ai appliqué comme valeur pour ce conteneur d'entrée.

48
00:03:37,130 --> 00:03:42,260
Maintenant, sur cette vue, nous référençons les styles. inputContainer, maintenant avec une mise en forme

49
00:03:42,260 --> 00:03:48,110
automatique que vous pouvez d'ailleurs faire dans Visual Studio Code en allant dans les préférences, les raccourcis

50
00:03:49,130 --> 00:03:54,860
clavier et ensuite rechercher le format du document, c'est le raccourci que vous souhaitez appuyer pour

51
00:03:55,010 --> 00:04:00,780
que les formats automatiques des documents, le fichier. Avec cela, nous avons une structure de code propre ici,

52
00:04:00,860 --> 00:04:04,710
NOUS voyons que ce sont nos styles de conteneurs d'entrée et nous les appliquons ici.

53
00:04:04,730 --> 00:04:10,910
Un autre avantage d'avoir cet objet de feuille de style est également QUE vous pouvez appliquer le même style à

54
00:04:10,910 --> 00:04:12,680
plusieurs vues sans le copier.

55
00:04:12,710 --> 00:04:18,200
Donc, si nous voulons avoir le style du conteneur d'entrée, non seulement sur cette vue mais aussi

56
00:04:18,350 --> 00:04:25,160
sur celle-ci, nous pourrions simplement écrire des styles de style. inputContainer, vous pouvez appliquer ce style à autant de composants que

57
00:04:25,190 --> 00:04:26,290
vous le souhaitez.

58
00:04:26,290 --> 00:04:32,460
Bien sûr, je n'en ai pas besoin ici, mais nous pourrions l'utiliser ici si nous en avions besoin. Maintenant, le dernier style que je veux appliquer est

59
00:04:32,460 --> 00:04:35,030
sur la saisie de texte ici.

60
00:04:35,030 --> 00:04:40,970
Là, je vais juste nommer cette entrée, trop d'accolades, configurer mes styles ici puis

61
00:04:41,130 --> 00:04:50,220
sur la saisie de texte, se référer aux styles. entrée, comme

62
00:04:50,430 --> 00:04:55,430
ça. Et avec cela, si nous enregistrons cela,

63
00:04:55,560 --> 00:05:01,320
nous avons le même aspect qu'auparavant, mais maintenant nous utilisons l'objet de feuille de style qui facilite le partage

64
00:05:01,320 --> 00:05:05,610
et la réutilisation des styles et qui peut également nous donner quelques optimisations de

65
00:05:05,610 --> 00:05:10,290
performances futures et en plus, notre code jsx ici simplement est beaucoup plus maigre maintenant.