Nous avons donc déjà examiné un ensemble solide de bases dont vous avez besoin pour créer des applications React Native, pour travailler avec ces
blocs de construction de base, même si
bien sûr beaucoup de choses ne sont toujours pas claires, nous n'avons pas vraiment
examiné de plus près le style et la mise en page et ainsi de suite, mais une
chose que nous devrions certainement faire maintenant est également d'explorer comment vous pouvez créer vos propres composants, car jusqu'à présent, nous
avons toujours travaillé dans l'application. fichier js et vous
ne construirez certainement pas de plus grandes applications dans
un seul fichier, ce fichier deviendrait super gros
après tout et si vous avez un composant personnalisé que vous prévoyez de répéter, nous devrons maintenant copier et
coller notre code.
Créons donc de nouveaux composants et donc ici dans le projet, je vais ajouter un nouveau dossier nommé composants, le
nom dépend de vous, mais comme je prévois de stocker certains composants là-dedans, le nom a du sens
pour moi et là-dedans, je souhaitez créer un composant pour l'élément de liste et également un pour notre zone de saisie.
Créons donc deux nouveaux fichiers là-dedans et j'aurai une convention de dénomination pour les
fichiers où je commence par des majuscules et j'aurai mon GoalItem. js, c'est un fichier Javascript bien sûr
et mon GoalInput. fichier js. Maintenant, les deux contiendront le composant React normal,
alors commençons par l'élément d'objectif et importons donc React de React, tout comme vous devez le faire dans un projet React for web.
Ensuite, ici, je vais créer mon composant fonctionnel, élément d'objectif qui obtient des accessoires et qui
doit ensuite renvoyer du jsx ici et je l'exporterai par défaut, comme ça.
Maintenant, le jsx que je veux y rendre doit utiliser des composants React Native ou d'autres composants personnalisés qui à leur tour
utilisent des composants React Native et ici je vais
aller avec ce contenu que j'avais ici. Je vais donc le couper de l'application. fichier js et retournez-le
ici.
Maintenant, pour utiliser ceci ici, nous devons importer la vue et le texte, donc
ces deux composants, à partir de React Native.
Importons donc la vue et le texte de React-Native ici.
De plus, je configure des styles et je veux utiliser la feuille
de style, je vais donc l'importer ici aussi, puis configurer ma constante de styles que vous pourriez nommer différemment bien sûr avec la création de la
feuille de style et je reviendrai à l'application. Fichier js et saisissez mon style d'élément de liste ici, coupez-le à partir de là et accédez à
l'élément d'objectif et ajoutez-le ici à cet objet que je passe à la feuille de style. créer.
Maintenant, cela devrait fonctionner, mais bien sûr, ce que je produis ici ne sera plus sur les données de l'article, attendons
plutôt que nous obtenions simplement cela en tant qu'accessoires, donc soit les accessoires les enfants afin qu'ils puissent être passés entre les balises d'ouverture
et de fermeture de notre composant personnalisé ou peut-être des accessoires. titre, tout ce que vous voulez, un
nom d'accessoire de votre choix. Nous pouvons maintenant utiliser notre composant
personnalisé, l'élément d'objectif en revenant à l'application. fichier js et ici j'ajouterai l'importation à l'élément d'objectif avec un G majuscule, afin
que React le reconnaisse comme un composant personnalisé à partir de. / components / GoalItem, vous pouvez omettre le. js et maintenant nous pouvons utiliser
l'élément d'objectif ici dans l'élément de rendu en tant que composant personnalisé, dans ce cas, un composant à fermeture automatique parce que puisque
j'utilise le titre des accessoires et non les accessoires, je n'attends rien entre l'ouverture
et la fermeture les balises de mon composant personnalisé. Je m'attends à un accessoire de titre, alors définissons cela ici avec
le titre, puis ici, nous pouvons pointer sur les données de l'élément, puis accéder à l'élément qui est un
objet où nous avons une clé de valeur et avec cela, nous devrions toujours voir comme avant si nous entrons dans certains objectifs ici, apprenez tout sur rn, oui
ça a l'air bien, maintenant avec notre composant personnalisé. Maintenant, voici une bonne pratique pour vous de mettre également la
saisie de texte et le bouton ou cette vue entière ici réellement dans notre composant de saisie d'objectif et bien sûr pour
cela, vous devrez également câbler la communication entre l'application. Le fichier js et le composant d'entrée d'objectif pour
être informés lorsque les utilisateurs appuient sur ce bouton dans le composant d'entrée d'objectif, puis ajoutent des données ici dans
l'application. fichier js.
C'est comme ça que vous le feriez dans un projet React for web aussi, donc si vous avez de l'expérience avec
ça, ça ne devrait pas poser de problème, sinon nous le ferons ensemble dans la prochaine leçon mais si vous savez comment le faire,
essayez certainement maintenant par vous-même.