Donc, avec cela, commençons notre application ici et il y a différentes façons de commencer bien sûr, je veux
commencer
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
texte et tout ici et je veux commencer par ajouter mon propre en-tête,
donc cette barre en haut de l'écran.
Maintenant, nous pouvons construire une telle barre par nous-mêmes ici, permettez-moi de me débarrasser de cette importation dont
nous n'avons pas besoin et je vais la construire non pas à l'intérieur de ce composant
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
importante à
retirer, tout comme dans React pour les applications Web, c'est une bonne pratique de diviser votre application en plusieurs composants que vous composez
ensuite ensemble, car cela conduit à un code plus gérable et réutilisable.
Je vais donc ajouter un nouveau dossier, des composants, le nom dépend de vous, vous pouvez nommer ce dossier comme vous
voulez et là-dedans, je veux avoir un en-tête. Fichier js pour contenir le composant d'en-tête.
Là, nous devons importer React de React afin que nous puissions utiliser React dedans
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
les seuls composants de base que vous pouvez utiliser dans le fin.
Vous ne pouvez pas utiliser d'éléments HTML Web ou quelque chose comme ça, vous
avez besoin de ces primitives de base que React Native vous donne.
Nous aurons donc certainement besoin d'une vue ici et également d'un composant texte et également d'un composant de feuille de style
et maintenant avec cela, nous pouvons commencer à construire notre en-tête.
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
dans ce cours, nous utiliserons des crochets dans les endroits où nous devons gérer l'état ou les effets secondaires
et ici, nous allons bien sûr, exportez ce composant à la fin et configurez également un objet styles avec la feuille de
style create afin que nous puissions le styliser à la fin.
Maintenant, créons notre composant ici, retournons quelque chose ici
et ce que je veux
retourner est à la fin une vue avec le texte à l'intérieur et le texte devrait
être notre titre.
Par conséquent, entre la balise d'ouverture et de fermeture ici, je produirai le titre des accessoires afin que notre propre
composant puisse recevoir le titre du titre et le publier ici. Et la vue entourant le texte sera utilisée pour positionner le
texte et lui donner un certain style, donc pour styliser notre en-tête parce que les éléments de texte seuls sont
également stylables mais pas dans la même mesure que les vues, les vues sont vraiment un peu plus flexible quant aux styles
que vous pouvez attribuer et quant à leur comportement et, par conséquent, vous souhaitez toujours
utiliser une vue pour un tel conteneur environnant et pour ce style global que votre composant peut avoir ou que
certaines parties de votre composant peuvent avoir.
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
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,
car comme je l'ai dit, vous pouvez également styler le texte et ici, je veux avoir des styles spécifiques
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
à 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
de style pour l'en-tête, donc pour ce composant de vue ici et là de bien sûr, vous êtes
libre d'expérimenter avec tout ce que vous voulez. J'irai avec une largeur de 100% pour qu'il prenne
la pleine largeur de périphérique que nous pouvons obtenir ou la pleine largeur du composant parent pour être précis mais je
l'ajouterai de telle sorte que le composant parent prenne toute la largeur du périphérique et donc , cela
prendra également la largeur totale de l'appareil à la fin. Attribuez une hauteur et là, vous pouvez expérimenter avec
différentes valeurs, j'ai trouvé 90 pour avoir l'air assez décent et donc je vais y aller.
Remarque, pour l'instant, je vais optimiser pour ces écrans que j'ai ici, dans le prochain module de cours, nous allons plonger
dans la façon dont vous pouvez ajuster vos vues et votre code pour différents appareils, à la fois en ce qui concerne leur
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
aussi dans notre application pour bien paraître sur ces deux émulateurs mais encore une fois, je reprendrai cela plus tard.
Donc hauteur de 90, un rembourrage en haut de 36 pour avoir un peu d'espacement vers le haut et je
dois l'ajouter pour faire face à des choses comme la barre d'état ici ou cette encoche ici,
donc j'ajoute donc ce haut de rembourrage et je veux aussi pour ajouter une couleur d'arrière-plan
ici et maintenant vous êtes bien sûr totalement libre de
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
c'est # f7287b qui est une couleur assez agréable dans mon opinion comme vous le verrez dans une seconde.
Maintenant, je veux également centrer le titre et, par conséquent, j'utiliserai aligner les éléments et justificationContenu parce
que chaque vue utilise par défaut flexbox et donc avec aligner les éléments et justificationContenu, nous pouvons
contrôler la façon dont les éléments enfants de la vue sont positionnés à l'intérieur de la vue et avec
centre pour
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
au centre, à la fois horizontalement et verticalement.
Maintenant, pour le titre de
l'en-tête, je veux également configurer certains styles pour cela.
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
et je veux définir la taille de la police à 18, disons, afin que nous ayons ce
fixe, un peu une plus grande taille de police ici. Avec cela, essayons d'utiliser cet en-tête
et utilisons-le dans l'application. fichier js ici. Là, nous avons cette
vue et cette vue n'a pas de style attaché.
Je vais changer cela et configurer une vue d'écran ici et lui donner un flex d'un attribut.
Maintenant, nous pouvons l'assigner ici et flex on s'assurera que cette vue occupe tout l'espace qu'elle peut obtenir
et puisque c'est la vue racine de notre application, cela signifie qu'elle prendra toute la largeur
et la hauteur qu'elle peut obtenir, elle occupera la totalité écran et donc puisque mon en-tête prend 100% de largeur, puisque
je vais l'ajouter directement à l'intérieur de cette vue qui est maintenant configurée pour prendre toute la largeur et la hauteur,
cet en-tête prendra également toute la largeur.
Alors maintenant, nous avons juste besoin d'ajouter l'en-tête
ici bien sûr, alors importez l'en-tête de. / components / header, vous pouvez
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
de titre, car n'oubliez pas que nous produisons l'accessoire de titre ici entre les balises de
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.
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
ici sur Android et je dirais que ça va pour les deux appareils. Encore une fois, nous explorerons plus tard
les moyens de peaufiner l'apparence de l'appareil spécifique sur lequel votre application s'exécute.