1
00:00:02,410 --> 00:00:07,890
Donc, de retour dans le code, nous avons commencé par ajouter quelques vues ici et bien sûr, cela ne fonctionnera

2
00:00:07,900 --> 00:00:13,930
pas, cela cassera ou ne rendra rien de significatif à l'écran. Dans cette première vue imbriquée ici, dans ce bloc,

3
00:00:13,930 --> 00:00:14,920
je suis

4
00:00:14,920 --> 00:00:21,330
allé avoir une entrée de texte et un bouton. Idéalement, les deux sont fournis par React Native, nous avons une entrée

5
00:00:21,330 --> 00:00:27,390
de texte ici et nous avons également un composant bouton. Nous pouvons donc importer à la fois la saisie de texte

6
00:00:27,390 --> 00:00:33,510
qui permet à l'utilisateur de saisir du texte et un bouton, puis ici dans cette vue, dans cette première vue imbriquée, je

7
00:00:33,510 --> 00:00:40,890
vais ajouter une saisie de texte en tant que balise à fermeture automatique car il n'y a rien que nous puissions passer entre l'ouverture et en fermant

8
00:00:40,890 --> 00:00:42,440
les balises et pour le

9
00:00:42,450 --> 00:00:47,430
bouton, vous pourriez penser que vous utilisez un bouton comme celui-ci, mais en fait, ce n'est pas ainsi

10
00:00:47,430 --> 00:00:47,960
que

11
00:00:47,970 --> 00:00:53,620
ce bouton React Native fonctionne, il s'agit plutôt d'un bouton à fermeture automatique et vous définissez une propriété title pour définir

12
00:00:53,840 --> 00:01:00,150
le texte à y rendre et ici, on pourrait dire ajouter. Maintenant, nous avons une entrée de texte et un

13
00:01:00,360 --> 00:01:08,230
bouton là-bas et si nous enregistrons ceci et cela se recharge, nous voyons le bouton ici mais nous ne voyons pas l'entrée de texte, non?

14
00:01:08,490 --> 00:01:11,070
Donc, cela ne fonctionne pas comme prévu.

15
00:01:11,070 --> 00:01:16,850
La raison en est que la saisie de texte sera masquée ici sous la barre d'état.

16
00:01:16,920 --> 00:01:22,740
C'est maintenant le moment où nous devrions commencer à ajouter une mise en page, une structure

17
00:01:22,770 --> 00:01:25,410
à cette page, car l'ajout de

18
00:01:25,410 --> 00:01:30,990
composants seuls ne fera pas l'affaire, une application React Native consiste à utiliser des composants, puis

19
00:01:31,080 --> 00:01:40,190
à ajouter la bonne mise en page, la bonne structure à vos composants. Donc ici, par exemple, il serait logique d'ajouter un rembourrage général autour de cette vue, donc

20
00:01:40,190 --> 00:01:46,310
sur cette vue de dessus, donc le rembourrage est essentiellement à une certaine distance de la bordure de cette vue qui est

21
00:01:46,760 --> 00:01:48,870
essentiellement le cadre de l'appareil dans notre cas

22
00:01:48,920 --> 00:01:54,890
ici, car je suis en parlant de la vue du haut au contenu de la vue, donc un certain espacement entre les

23
00:01:54,980 --> 00:02:00,650
bordures du haut, de cette vue environnante et du contenu de la vue et pour cela, nous pouvons ajouter la propriété

24
00:02:00,650 --> 00:02:02,660
de style ici sur la vue.

25
00:02:02,660 --> 00:02:09,530
La plupart des composants de React Native prennent en charge la propriété style, la vue le fait et là, vous utilisez

26
00:02:10,070 --> 00:02:15,800
cette liaison de contenu dynamique ici que vous connaissez également dans React normal avec les accolades simples

27
00:02:15,800 --> 00:02:21,590
et le style attend un objet Javascript maintenant. Nous ajoutons donc une autre paire d'accolades ici et maintenant

28
00:02:21,590 --> 00:02:25,530
une erreur courante est que vous pensez que c'est une syntaxe spéciale qui

29
00:02:25,670 --> 00:02:31,390
nécessite des accolades doubles, en effet c'est la syntaxe React normale avec des accolades pareillement bouclées où alors la valeur

30
00:02:31,400 --> 00:02:34,640
dynamique que vous passez au style se trouve être un objet

31
00:02:34,640 --> 00:02:40,310
Javascript, nous avons donc une autre paire d'accolades. Et dans cet objet, vous pouvez maintenant avoir

32
00:02:40,310 --> 00:02:46,610
des paires clé-valeur où les clés sont vos noms de propriété de style et les valeurs sont les valeurs de ces

33
00:02:47,420 --> 00:02:51,740
propriétés de style et ces noms de propriété de style sont influencés par CSS.

34
00:02:51,770 --> 00:02:58,250
Donc, ici, ce que vous pouvez faire, c'est que vous pouvez ajouter un remplissage, qui existe également dans React Native et

35
00:02:58,250 --> 00:03:04,130
une liste complète des propriétés de style prises en charge peut toujours être trouvée en accédant au composant que

36
00:03:04,130 --> 00:03:10,850
vous utilisez, comme la vue ici, puis en cliquant sur sur la propriété de style et ici, si vous cliquez sur les

37
00:03:10,850 --> 00:03:17,750
styles de vue, vous verrez une liste de toutes les propriétés fournies que vous pouvez utiliser et vous verrez quelques propriétés spéciales pour

38
00:03:17,750 --> 00:03:24,410
la vue ici, puis quelques accessoires généraux comme les accessoires de mise en page et là, vous trouveriez le rembourrage par exemple.

39
00:03:24,480 --> 00:03:30,640
C'est ainsi que vous pouvez découvrir ce qui est pris en charge, mais vous verrez également de nombreux exemples tout au long de ce cours.

40
00:03:30,650 --> 00:03:36,080
Donc, ici, j'ajoute un remplissage et la valeur peut maintenant être simplement un nombre qui sera des pixels indépendants de l'appareil,

41
00:03:36,290 --> 00:03:41,300
donc une valeur de pixel qui semble toujours bonne quelle que soit la taille de l'appareil que vous avez.

42
00:03:41,330 --> 00:03:46,990
Donc ici, nous pourrions ajouter 10 et si nous le faisons, maintenant nous voyons que le bouton est un

43
00:03:47,050 --> 00:03:51,860
peu plus bas, peut-être ajoutons 30 ici afin que nous puissions voir une plus grande différence

44
00:03:52,090 --> 00:03:56,050
et maintenant cela fonctionne et maintenant si vous appuyez au-dessus du bouton, vous ne

45
00:03:56,050 --> 00:04:01,230
voyez pas vraiment une entrée ici mais vous voyez que mon clavier virtuel s'est ouvert sur Android, sur

46
00:04:01,240 --> 00:04:03,790
iOS il ne s'ouvre pas par défaut mais là

47
00:04:03,970 --> 00:04:11,410
aussi vous pouvez taper ici et si vous deviez taper assez souvent ou si vous allez à matériel, ce clavier à bascule clavier logiciel, il

48
00:04:11,410 --> 00:04:13,780
devrait également s'ouvrir là-bas, donc ici nous

49
00:04:13,780 --> 00:04:15,180
avons également une entrée.

50
00:04:15,190 --> 00:04:19,840
Alors maintenant, nous pouvons voir cette entrée parce que maintenant elle n'est plus derrière cette barre d'état.

51
00:04:19,840 --> 00:04:27,040
Donc, l'ajout de ce rembourrage était probablement logique, car maintenant, nous nous sommes assurés que notre disposition est à l'intérieur

52
00:04:27,040 --> 00:04:28,660
de notre écran ici.

53
00:04:28,660 --> 00:04:31,980
Maintenant, il existe d'autres outils pour s'assurer que nous avons suffisamment de

54
00:04:32,170 --> 00:04:36,460
remplissage ici, mais pour l'instant, définissons manuellement le remplissage et définissons-le peut-être à une valeur de 30.

55
00:04:36,880 --> 00:04:39,760
Nous commençions donc avec la mise en page, maintenant

56
00:04:39,760 --> 00:04:43,650
revenons à ce composant et assurons-nous que nous pouvons voir quelque chose, nous pouvons

57
00:04:43,660 --> 00:04:48,120
voir qu'il y a une entrée de texte et nous n'avons pas seulement à le deviner.

58
00:04:48,550 --> 00:04:54,070
Pour cela, nous pouvons aller à la saisie de texte et y ajouter par exemple l'accessoire d'espace réservé et

59
00:04:54,070 --> 00:04:55,800
comme pour découvrir ce que vous

60
00:04:55,810 --> 00:05:02,990
pouvez définir, vous pouvez toujours aller aux documents officiels, dans ce cas aux documents de saisie de texte et là, vous trouverez une description de son

61
00:05:03,000 --> 00:05:04,930
utilisation et quelques exemples mais si vous

62
00:05:05,070 --> 00:05:10,770
faites défiler vers le bas, vous trouverez également tous les accessoires que vous pouvez définir et là par exemple, vous

63
00:05:11,130 --> 00:05:16,410
découvrez que vous pouvez définir un accessoire d'espace réservé, qui est ce texte factice qui s'affiche avant que l'utilisateur

64
00:05:16,410 --> 00:05:17,640
n'entre du texte.

65
00:05:17,640 --> 00:05:23,580
Donc ici, cela prend une chaîne et ici, nous pourrions entrer l'objectif de cours parce que vous devriez pouvoir définir votre

66
00:05:23,580 --> 00:05:24,940
objectif de cours ici

67
00:05:25,040 --> 00:05:28,970
et si vous le faites, vous voyez à la fois sur Android et sur

68
00:05:28,980 --> 00:05:31,510
iOS il y a ce texte d'objectif de cours.

69
00:05:31,510 --> 00:05:33,590
Maintenant encore, cela pourrait être un peu

70
00:05:33,600 --> 00:05:39,180
mieux, pourrait être un peu plus clair qu'il y a une entrée de texte et donc ici, je vais

71
00:05:39,210 --> 00:05:40,170
ajouter un

72
00:05:40,170 --> 00:05:48,170
style, un autre style en ligne et ici je vais configurer la couleur du bas de la bordure en noir, noir maintenant est une chaîne, ces raccourcis

73
00:05:48,180 --> 00:05:53,940
de couleur sont pris en charge dans React Native et une liste complète de toutes les couleurs disponibles est

74
00:05:54,870 --> 00:06:01,860
jointe à cette conférence ici et je peux également voir qu'une largeur de bordure inférieure de disons 1 et ce que cela signifie, cela

75
00:06:01,860 --> 00:06:07,770
devrait définir un fond frontière sur cette entrée de sorte que maintenant si nous revenons en arrière, nous avons ce

76
00:06:07,770 --> 00:06:13,710
soulignement ici, nous pouvons le voir clairement sur iOS et comme il n'y a toujours pas beaucoup d'espace sur iOS,

77
00:06:13,710 --> 00:06:17,520
permettez-moi d'augmenter ce rembourrage ici à 50 peut-être, oui ça a l'air mieux.

78
00:06:17,540 --> 00:06:22,630
Alors maintenant, nous avons cette frontière en dessous de notre entrée et cela montre clairement qu'il y a une entrée ici.

79
00:06:22,810 --> 00:06:26,380
Bien sûr, vous n'êtes pas limité à définir uniquement une bordure en

80
00:06:26,380 --> 00:06:28,640
bas, vous pouvez également définir une bordure

81
00:06:28,660 --> 00:06:32,140
générale en omettant le bas ici, une couleur et une largeur

82
00:06:32,530 --> 00:06:36,180
de bordure et si vous le faisiez, cela serait entouré d'un frontière.

83
00:06:36,190 --> 00:06:42,250
Maintenant, une note importante concernant ces noms de style ici, les noms des propriétés de style, vous voyez bien sûr que

84
00:06:42,250 --> 00:06:49,390
c'est la largeur de la bordure, la couleur de la bordure écrite comme ceci, en CSS normal, vous auriez eu la couleur de la bordure

85
00:06:49,750 --> 00:06:55,870
et cela appliquerait la couleur de la bordure mais cela être un nom de propriété non valide en Javascript, c'est pourquoi cela

86
00:06:55,870 --> 00:06:57,670
n'est pas pris en charge.

87
00:06:57,670 --> 00:07:03,280
Maintenant, en fait, un nom de propriété valide en Javascript serait si vous enveloppez cela entre guillemets, mais

88
00:07:03,520 --> 00:07:10,240
même cela n'est pas pris en charge dans React Native, donc ces syntaxes alternatives, par exemple cette syntaxe fonctionneraient en Javascript si

89
00:07:10,240 --> 00:07:18,010
vous appliquez un style à l'élément HTML Web , ces syntaxes ne sont pas prises en charge dans React Native cependant, vous devez vraiment utiliser cette

90
00:07:18,010 --> 00:07:23,320
syntaxe de cas de chameau où vous écrivez par exemple la couleur de la bordure comme ceci

91
00:07:23,320 --> 00:07:29,740
ou en bref, vous devez utiliser les noms de propriété que vous trouvez également dans les documents officiels, là il n'y

92
00:07:29,740 --> 00:07:37,030
a pas d'autres noms pour ces propriétés de style et nous pourrions maintenant ajouter ici un remplissage de disons 10 afin que nous ayons

93
00:07:37,600 --> 00:07:43,570
un certain espacement entre la bordure et la partie réelle où nous entrons quelque chose et je dirais que cela

94
00:07:43,720 --> 00:07:49,540
semble déjà bien mieux et nous peut clairement voir que nous avons ici une entrée où les utilisateurs peuvent

95
00:07:49,540 --> 00:07:50,530
entrer quelque chose.