1
00:00:02,350 --> 00:00:09,690
Donc, avec cela, commençons notre application ici et il y a différentes façons de commencer bien sûr, je veux

2
00:00:09,700 --> 00:00:10,520
commencer

3
00:00:10,690 --> 00:00:19,420
en déposant d'abord ce style de conteneur ici dans mon écran de démarrage et à la place, je veux me débarrasser de la

4
00:00:19,960 --> 00:00:25,060
texte et tout ici et je veux commencer par ajouter mon propre en-tête,

5
00:00:25,060 --> 00:00:27,790
donc cette barre en haut de l'écran.

6
00:00:28,150 --> 00:00:34,360
Maintenant, nous pouvons construire une telle barre par nous-mêmes ici, permettez-moi de me débarrasser de cette importation dont

7
00:00:34,360 --> 00:00:39,880
nous n'avons pas besoin et je vais la construire non pas à l'intérieur de ce composant

8
00:00:39,880 --> 00:00:46,630
d'application mais dans un fichier de composant séparé, dans un composant personnalisé séparé car et c'est déjà une chose super

9
00:00:46,630 --> 00:00:47,630
importante à

10
00:00:47,680 --> 00:00:55,360
retirer, tout comme dans React pour les applications Web, c'est une bonne pratique de diviser votre application en plusieurs composants que vous composez

11
00:00:55,360 --> 00:00:59,540
ensuite ensemble, car cela conduit à un code plus gérable et réutilisable.

12
00:00:59,540 --> 00:01:04,660
Je vais donc ajouter un nouveau dossier, des composants, le nom dépend de vous, vous pouvez nommer ce dossier comme vous

13
00:01:04,910 --> 00:01:09,360
voulez et là-dedans, je veux avoir un en-tête. Fichier js pour contenir le composant d'en-tête.

14
00:01:09,490 --> 00:01:14,490
Là, nous devons importer React de React afin que nous puissions utiliser React dedans

15
00:01:14,500 --> 00:01:23,300
et écrire du code jsx, puis nous aurons également besoin de certains composants de React Native car vous ne devez jamais oublier que ce sont

16
00:01:23,300 --> 00:01:27,650
les seuls composants de base que vous pouvez utiliser dans le fin.

17
00:01:27,650 --> 00:01:31,310
Vous ne pouvez pas utiliser d'éléments HTML Web ou quelque chose comme ça, vous

18
00:01:31,310 --> 00:01:34,720
avez besoin de ces primitives de base que React Native vous donne.

19
00:01:34,850 --> 00:01:40,290
Nous aurons donc certainement besoin d'une vue ici et également d'un composant texte et également d'un composant de feuille de style

20
00:01:40,520 --> 00:01:43,420
et maintenant avec cela, nous pouvons commencer à construire notre en-tête.

21
00:01:43,550 --> 00:01:51,890
Donc, pour cela, je vais ajouter une constante d'en-tête qui contient mon composant fonctionnel parce que je ne travaillerai avec des composants fonctionnels que

22
00:01:51,890 --> 00:01:58,560
dans ce cours, nous utiliserons des crochets dans les endroits où nous devons gérer l'état ou les effets secondaires

23
00:01:58,620 --> 00:02:06,170
et ici, nous allons bien sûr, exportez ce composant à la fin et configurez également un objet styles avec la feuille de

24
00:02:06,170 --> 00:02:10,460
style create afin que nous puissions le styliser à la fin.

25
00:02:10,520 --> 00:02:13,020
Maintenant, créons notre composant ici, retournons quelque chose ici

26
00:02:13,040 --> 00:02:14,580
et ce que je veux

27
00:02:14,750 --> 00:02:19,120
retourner est à la fin une vue avec le texte à l'intérieur et le texte devrait

28
00:02:19,120 --> 00:02:20,190
être notre titre.

29
00:02:20,300 --> 00:02:26,780
Par conséquent, entre la balise d'ouverture et de fermeture ici, je produirai le titre des accessoires afin que notre propre

30
00:02:26,780 --> 00:02:34,010
composant puisse recevoir le titre du titre et le publier ici. Et la vue entourant le texte sera utilisée pour positionner le

31
00:02:34,010 --> 00:02:40,790
texte et lui donner un certain style, donc pour styliser notre en-tête parce que les éléments de texte seuls sont

32
00:02:40,880 --> 00:02:47,960
également stylables mais pas dans la même mesure que les vues, les vues sont vraiment un peu plus flexible quant aux styles

33
00:02:47,960 --> 00:02:53,090
que vous pouvez attribuer et quant à leur comportement et, par conséquent, vous souhaitez toujours

34
00:02:53,120 --> 00:02:59,600
utiliser une vue pour un tel conteneur environnant et pour ce style global que votre composant peut avoir ou que

35
00:02:59,600 --> 00:03:02,380
certaines parties de votre composant peuvent avoir.

36
00:03:02,390 --> 00:03:08,810
Alors ici, je vais ajouter l'accessoire de style et attribuer un style à mon objet styles, un style que nous n'avons pas encore créé mais je

37
00:03:08,810 --> 00:03:16,810
vais le nommer en-tête et je donnerai également au texte un accessoire de style et je pointerai le titre de l'en-tête des styles ou tout ce que vous voulez pour le nommer,

38
00:03:16,820 --> 00:03:21,500
car comme je l'ai dit, vous pouvez également styler le texte et ici, je veux avoir des styles spécifiques

39
00:03:21,500 --> 00:03:28,360
au texte plus tard pour également m'assurer que le texte a l'air bien. Alors maintenant, ici dans la feuille de style, nous pouvons commencer

40
00:03:28,450 --> 00:03:35,170
à styliser notre en-tête et je commencerai par l'en-tête lui-même, en ajoutant un accessoire d'en-tête, puis cet objet contiendra ces définitions

41
00:03:35,170 --> 00:03:40,810
de style pour l'en-tête, donc pour ce composant de vue ici et là de bien sûr, vous êtes

42
00:03:40,810 --> 00:03:46,960
libre d'expérimenter avec tout ce que vous voulez. J'irai avec une largeur de 100% pour qu'il prenne

43
00:03:47,080 --> 00:03:53,470
la pleine largeur de périphérique que nous pouvons obtenir ou la pleine largeur du composant parent pour être précis mais je

44
00:03:53,470 --> 00:03:58,810
l'ajouterai de telle sorte que le composant parent prenne toute la largeur du périphérique et donc , cela

45
00:03:58,840 --> 00:04:05,040
prendra également la largeur totale de l'appareil à la fin. Attribuez une hauteur et là, vous pouvez expérimenter avec

46
00:04:05,040 --> 00:04:10,020
différentes valeurs, j'ai trouvé 90 pour avoir l'air assez décent et donc je vais y aller.

47
00:04:10,020 --> 00:04:16,500
Remarque, pour l'instant, je vais optimiser pour ces écrans que j'ai ici, dans le prochain module de cours, nous allons plonger

48
00:04:16,500 --> 00:04:23,610
dans la façon dont vous pouvez ajuster vos vues et votre code pour différents appareils, à la fois en ce qui concerne leur

49
00:04:23,610 --> 00:04:30,690
taille ainsi qu'en ce qui concerne la plate-forme votre code fonctionne. Pour l'instant, nous n'aurons pas de différenciation là-bas, nous ajusterons

50
00:04:30,690 --> 00:04:37,640
aussi dans notre application pour bien paraître sur ces deux émulateurs mais encore une fois, je reprendrai cela plus tard.

51
00:04:37,830 --> 00:04:45,900
Donc hauteur de 90, un rembourrage en haut de 36 pour avoir un peu d'espacement vers le haut et je

52
00:04:45,900 --> 00:04:53,130
dois l'ajouter pour faire face à des choses comme la barre d'état ici ou cette encoche ici,

53
00:04:53,160 --> 00:05:00,200
donc j'ajoute donc ce haut de rembourrage et je veux aussi pour ajouter une couleur d'arrière-plan

54
00:05:00,360 --> 00:05:04,760
ici et maintenant vous êtes bien sûr totalement libre de

55
00:05:04,770 --> 00:05:13,350
choisir n'importe quelle couleur que vous voulez, j'ai préparé une belle couleur, un code hexadécimal d'une couleur que j'aime personnellement et

56
00:05:13,380 --> 00:05:21,450
c'est # f7287b qui est une couleur assez agréable dans mon opinion comme vous le verrez dans une seconde.

57
00:05:21,460 --> 00:05:27,250
Maintenant, je veux également centrer le titre et, par conséquent, j'utiliserai aligner les éléments et justificationContenu parce

58
00:05:27,340 --> 00:05:33,280
que chaque vue utilise par défaut flexbox et donc avec aligner les éléments et justificationContenu, nous pouvons

59
00:05:33,280 --> 00:05:39,610
contrôler la façon dont les éléments enfants de la vue sont positionnés à l'intérieur de la vue et avec

60
00:05:39,640 --> 00:05:40,780
centre pour

61
00:05:40,780 --> 00:05:48,010
aligner les éléments et justificationContenu également défini sur centre, nous centrons tous les enfants ou élément enfant à l'intérieur de la vue

62
00:05:48,010 --> 00:05:50,680
au centre, à la fois horizontalement et verticalement.

63
00:05:50,680 --> 00:05:52,480
Maintenant, pour le titre de

64
00:05:52,480 --> 00:05:55,640
l'en-tête, je veux également configurer certains styles pour cela.

65
00:05:55,780 --> 00:06:05,230
Donc, le titre de l'en-tête ici, qui devrait avoir une couleur noire parce que cela correspondra à cette couleur ici et pour que nous puissions lire le texte

66
00:06:05,260 --> 00:06:11,020
et je veux définir la taille de la police à 18, disons, afin que nous ayons ce

67
00:06:11,050 --> 00:06:18,500
fixe, un peu une plus grande taille de police ici. Avec cela, essayons d'utiliser cet en-tête

68
00:06:18,620 --> 00:06:26,550
et utilisons-le dans l'application. fichier js ici. Là, nous avons cette

69
00:06:26,560 --> 00:06:31,070
vue et cette vue n'a pas de style attaché.

70
00:06:31,150 --> 00:06:38,050
Je vais changer cela et configurer une vue d'écran ici et lui donner un flex d'un attribut.

71
00:06:38,050 --> 00:06:44,090
Maintenant, nous pouvons l'assigner ici et flex on s'assurera que cette vue occupe tout l'espace qu'elle peut obtenir

72
00:06:44,140 --> 00:06:49,780
et puisque c'est la vue racine de notre application, cela signifie qu'elle prendra toute la largeur

73
00:06:49,780 --> 00:06:56,770
et la hauteur qu'elle peut obtenir, elle occupera la totalité écran et donc puisque mon en-tête prend 100% de largeur, puisque

74
00:06:56,770 --> 00:07:03,730
je vais l'ajouter directement à l'intérieur de cette vue qui est maintenant configurée pour prendre toute la largeur et la hauteur,

75
00:07:03,730 --> 00:07:06,360
cet en-tête prendra également toute la largeur.

76
00:07:06,370 --> 00:07:08,440
Alors maintenant, nous avons juste besoin d'ajouter l'en-tête

77
00:07:08,440 --> 00:07:12,480
ici bien sûr, alors importez l'en-tête de. / components / header, vous pouvez

78
00:07:12,580 --> 00:07:20,020
omettre l'extension de fichier, puis simplement ajouter l'en-tête en tant que balise à fermeture automatique ici, mais n'oubliez pas de définir un accessoire

79
00:07:20,020 --> 00:07:25,120
de titre, car n'oubliez pas que nous produisons l'accessoire de titre ici entre les balises de

80
00:07:25,570 --> 00:07:33,120
texte, donc nous peut ajouter un titre ici et je vais le nommer deviner un nombre parce que c'est le but de notre jeu.

81
00:07:33,120 --> 00:07:39,210
Maintenant, si nous enregistrons cela, il devrait automatiquement être reconstruit et vous devriez voir un en-tête qui ressemble à ceci sur l'iPhone et comme ceci

82
00:07:39,240 --> 00:07:45,900
ici sur Android et je dirais que ça va pour les deux appareils. Encore une fois, nous explorerons plus tard

83
00:07:46,290 --> 00:07:52,320
les moyens de peaufiner l'apparence de l'appareil spécifique sur lequel votre application s'exécute.