Maintenant, avec ce conteneur d'entrée défini et avec quelques nouveaux styles couverts, nous pouvons faire
quelque chose que j'ai mentionné que ce serait toujours une bonne
idée, nous pouvons diviser notre application en plusieurs composants.
Ce look ici, ce
look de conteneur d'entrée, ce look de carte est probablement quelque chose que nous voulons également utiliser dans d'autres parties
de l'application.
Nous pourrions avoir différents articles que nous voulons présenter dans une
telle carte, pensez à créer une boutique en ligne où vous avez chaque produit
dans une telle carte sur l'écran de vue d'ensemble. Maintenant, pour éviter de répéter cette définition de style encore
et encore, nous pouvons l'externaliser dans un composant séparé, un composant qui n'a pas vraiment beaucoup de logique
mais qui contrôle le style
de son contenu, un pur composant de présentation donc. Techniquement, il s'agit toujours d'un composant React normal et je vais donc créer un
nouveau fichier ici dans le dossier des composants et le nommer carte. Le nom dépend de vous, mais c'est ce look de
carte typique, donc
cela ressemble à un nom approprié pour moi.
Maintenant, ici comme toujours, importez React de React, puis importez également la vue de React Native ici, puis créez le composant de
carte, un composant fonctionnel comme celui-ci que vous exportez finalement par défaut et évidemment, car il s'agit de présentation ici, nous J'aurai besoin
de la feuille
de style pour créer un objet de style car ce sera l'élément central de
ce composant, il devrait être là
pour s'enrouler autour de tout contenu et appliquer simplement un style général.
Alors maintenant, je vais à l'écran de démarrage du jeu et je vais saisir tous les styles ici du conteneur d'entrée, les copier
à partir de là et les ajouter à la carte à la place. Ici, je vais ajouter une nouvelle propriété de carte
et
utiliser mes styles ici et à l'intérieur du composant carte, je
vais avoir un balisage très simple pour ainsi dire, du code jsx très simple.
C'est juste une vue que je reviens ici qui devrait être entourée d'accessoires enfants, accessoires enfants est
cet accessoire spécial dans React qui est essentiellement le contenu que vous passez entre les balises
d'ouverture et de fermeture de votre composant personnalisé. Il peut donc s'enrouler autour de n'importe quel contenu car le
seul objectif de ce composant de carte est d'appliquer un style au conteneur environnant et nous le faisons en ajoutant des styles de carte ici.
Maintenant, il n'y a qu'une seule chose, il y a certains styles ici qui ne devraient probablement pas être définis de
l'intérieur de la
carte, toutes les cartes ne peuvent pas avoir cette largeur ou cette largeur maximale et toutes les cartes ne doivent pas centrer leur contenu.
Par conséquent, je vais couper ces trois éléments à partir de là et ne disposer que de l'ombre et
du rembourrage ici et je veux rendre cela un peu plus flexible.
Outre les styles de carte, ce serait bien si nous pouvions également attribuer nos propres styles
de l'extérieur et peut-être même remplacer certains des styles de carte. Nous pouvons le faire en passant un nouvel objet à l'accessoire de style et
en distribuant toutes les propriétés, toutes les paires clé-valeur de notre style de cartes ici dans ce nouvel objet.
Il s'agit de l'opérateur d'étalement, une fonctionnalité Javascript moderne qui extrait toutes les paires clé-valeur d'un objet de
cet objet et l'ajoute à un nouvel objet environnant.
Nous copions donc tous les styles définis là-bas dans ce nouvel objet et je
le fais pour que je puisse également ajouter une autre paire clé-valeur ici ou un autre ensemble de paires clé-valeur où
je prends tous les styles définis dans les styles d'accessoires, donc dans le style prop que j'ai passé à mon propre composant personnalisé, je prends
toutes les
paires clé-valeur qui y sont définies et les fusionne dans cet objet et puisque je fais cette seconde, cela remplacera toutes
les paires clé-valeur configurées dans la carte des styles, afin que nous puissions remplacer tous les styles qui y
sont configurés de l'extérieur lorsque nous utilisons notre composant
et lorsque nous ajoutons des styles supplémentaires en dehors du composant, il fusionnera également cela dans et le considérera
et avec cela, nous pouvons également attribuer nos propres styles de l'extérieur du composant carte lorsque nous utilisons le composant carte
et l'utilisation du composant carte est quelque chose qui aurait du sens dans une prochaine étape.
Alors, allons à l'écran de démarrage du jeu et importons la carte à partir du dossier des composants et à partir
du dossier de la carte et remplaçons notre vue du conteneur d'entrée ici par une carte, comme celle-ci, comme celle-ci, par des balises
d'ouverture et de fermeture.
Maintenant, encore une fois, je veux définir mes propres styles, je veux définir ma propre largeur, la largeur maximale
et aligner les éléments, donc je vais garder le conteneur d'entrée dans
la feuille de style là-bas mais maintenant me débarrasser de tous les autres styles là-dedans, tous les styles qui sont maintenant configurés dans la
carte
afin que nous ne gardions que la largeur et l'alignement ici, puis que nous ajoutions ceci ici à la carte sur l'accessoire de style qui est accepté ou qui
a un effet parce que dans le composant de la carte, c'est cet accessoire de style qui Je fusionne avec mes autres
styles, donc pour cet accessoire de style, je pointerai sur le conteneur d'entrée des styles. Maintenant, si nous enregistrons cela, je reçois une erreur,
l'objet n'est pas
une fonction près de la feuille de style React Native.
Donc dans la carte. fichier js car il pointe ici, quelque chose ne va pas, me donne même le
numéro de ligne, c'est la ligne 10, c'est ce que ce nombre signifie ici et oui, mon problème ici est que j'utilise une feuille de style comme celle-ci, c'est
faux, à la
place nous devons appeler la feuille de style . créer pour définir nos propres styles, c'est
donc la bonne syntaxe.
C'est donc une erreur de syntaxe, pas techniquement une erreur de syntaxe mais j'utilise mal l'objet de feuille de style.
C'est donc une erreur de mon côté, le message d'erreur nous a aidés et maintenant
nous avons le même look qu'avant mais nous avons cette carte réutilisable que nous pouvons maintenant utiliser dans n'importe quel endroit où nous
voulons avoir exactement ce look avec les ombres et bientôt.