Avez-vous réussi?
Faisons le ensemble.
Créons un nouveau composant ici dans l'entrée d'objectif en important React de React, puis ici,
je nommerai cette entrée d'objectif
et j'aime cette syntaxe constante ici, vous pouvez utiliser l'entrée d'objectif de fonction pour
créer votre composant fonctionnel, ce serait bien aussi. Ensuite, ici, je vais exporter l'entrée d'objectif par défaut et maintenant ici, nous devons
retourner quelque chose et que quelque chose est finalement cette
vue avec la saisie de texte et le bouton.
Alors laissez-moi saisir cette vue entière, la retourner ici entre crochets afin qu'elle soit écrite sur plusieurs lignes et bien formatée et bien sûr, nous
devons maintenant à nouveau importer des éléments de React Native parce que nous utilisons quelques composants de React Native , nous
utilisons le composant vue, nous utilisons le composant de saisie de texte, nous utilisons le composant bouton
et je veux également utiliser le composant feuille de style pour configurer mon
objet feuille de style.
Donc pour cela, ajoutons des styles ici avec la feuille de style. créer, passer un objet à cette feuille de style. créer une méthode et bien
sûr prendre les styles de l'application. Fichier js, ce serait le conteneur d'entrée et l'entrée, donc
coupez les deux pour que seul l'écran reste ici et en arrière dans la saisie d'objectif, je vais ajouter
les deux ici à ma feuille de style pour que cela fonctionne à nouveau. Ce qui ne fonctionnera pas en ce moment, c'est que
lorsque nous appuyez sur le bouton, que nous ajoutons cela parce qu'ici, nous n'avons pas l'état dans la saisie d'objectif et lorsque je tape sur le bouton, je
veux réellement faire quelque chose dans l'application. js.
Donc, tout d'abord, nous devons diviser l'État. L'objectif saisi ne doit pas être géré dans l'application. js mais il doit être géré
dans la saisie de l'objectif, car c'est là que nous avons la saisie de
texte à la fin, c'est là que l'utilisateur entre dans l'objectif. Ajoutons donc importation useState ici dans l'entrée d'objectif, puis ajoutons ici notre
logique de gestion d'état avec l'objectif entré et définissons l'objectif entré que nous obtenons de useState que nous avons initialisé avec une chaîne vide, ajoutons-le
ici à l'entrée d'objectif et à partir de l'application. fichier js, je vais également prendre le gestionnaire d'entrée
d'objectif, le couper à partir de là et l'ajouter à l'entrée d'objectif ici, donc
cette fonction dans une fonction que nous nous connectons à onChangeText et maintenant avec cela, la récupération de l'entrée utilisateur
devrait fonctionner à nouveau.
Maintenant, pour le bouton, lorsque nous appuyons dessus, je veux déclencher une fonction dans l'application. js, je veux déclencher le gestionnaire d'ajout d'objectifs et cette fonction doit rester
ici car j'ai besoin de gérer la liste ici parce que l'application. Le fichier js est le seul composant
qui aura accès à l'entrée d'objectif et à la FlatList où nous produisons les objectifs et en
parlant de cela, nous pouvons déjà y importer des entrées d'objectif dans l'application. js à partir de l'entrée d'objectif des composants et ajouter
une entrée d'objectif en tant que composant ici au-dessus de la FlatList mais encore une fois, nous devons maintenant pouvoir savoir
quand un bouton est enfoncé dans ce composant et dans React,
vous le faites en passant la fonction que l'enfant Le composant doit éventuellement s'exécuter en tant que prop au
composant enfant.
Donc ici, nous pourrions ajouter AddGoal, ce nom dépend entièrement de vous, c'est un
accessoire que vous
définissez et cela pointe vers le gestionnaire de buts.
Cela seul ne fera rien mais onAddGoal sera désormais reçu comme un accessoire à l'intérieur de l'entrée d'objectif et il pointera sur
une fonction, ce qui signifie que nous pouvons l'exécuter en tant que fonction là-bas.
Donc, dans la saisie des objectifs, là-bas sous presse, je
peux simplement pointer vers l'hélice. onAddGoal, non?
Parce que onAddGoal est le nom de l'accessoire que je configure ici dans l'application. fichier js, qui est reçu à l'intérieur de
l'entrée d'objectif sur l'objet d'accessoires que nous obtenons dans chaque composant fonctionnel et onAddGoal pointe sur une fonction, afin
que nous puissions le transmettre à onPress afin
que onPress ou React Native sache qu'il doit donc appeler cette fonction lorsque nous appuyons sur
le bouton,
c'est comme ça que vous faites dans React Native.
Nous aurions toujours un problème parce que dans l'ajout d'un gestionnaire d'objectifs, je fais référence à l'objectif entré et qui était précédemment géré ici,
mais qui ne l'est plus, nous avons géré
l'objectif entré, qui est la saisie de texte entrée par l'utilisateur dans l'objectif. entrée maintenant et non dans
l'application. js.
Donc, le gestionnaire d'ajout d'objectif devrait en fait maintenant recevoir un argument qui est le titre de l'objectif ou tout ce que
vous
voulez lui donner, ce nom dépend de vous et c'est ce que nous stockons comme valeur ici.
Maintenant, nous devons nous assurer que nous transmettons cet argument quand on ajoute un objectif est exécuté dans l'entrée d'objectif.
Donc, cela se produit ici sur une presse et là, nous indiquons simplement cela pour configurer également un argument
qui devrait finalement être transmis, nous obtenons deux
options, la première est que nous configurons une fonction de flèche anonyme ici.
Maintenant, cette fonction de flèche sera finalement exécutée et donc maintenant nous pouvons ajouter des
parenthèses ici car cela
ne sera plus exécuté lorsque cela sera rendu en premier, mais cette fonction de flèche sera enregistrée
comme une fonction à
exécuter pour onPress et maintenant ici dans onAddGoal, nous pouvons transmettre l'objectif entré par exemple, cela fonctionnerait ou bien, nous n'utilisons
pas cette approche de fonction de flèche anonyme et donc nous ne pouvons pas ajouter
de parenthèses ici mais nous pouvons ensuite utiliser une autre fonctionnalité Javascript, sur les fonctions que nous pouvons appeler lier à préconfigurer certains
arguments qui devraient éventuellement être transmis lors de l'exécution de cette fonction.
Le premier argument est toujours à quoi le mot-clé this doit faire référence.
Cela n'a pas d'importance pour nous ici, nous pouvons donc simplement l'écrire, mais le deuxième argument ici ou
tous les autres arguments par la suite seront en fait les arguments reçus par cette fonction lorsqu'elle est appelée et
appelée sur une pression de bouton.
Ce sont donc maintenant les arguments qui sont transmis à la fonction onAddGoal qui à la fin est
juste notre fonction de gestionnaire d'ajout d'objectif et là, nous avons besoin du
titre de l'objectif, nous
devons donc le transmettre, donc ici, je peux maintenant configurer la saisie objectif comme argument à transmettre
et c'est la syntaxe Javascript normale vanille ici.
Et maintenant, avec ça, ça devient rendu, ça a l'air
bien et si
j'entre, apprends React Native, j'obtiens toujours la sortie ici. Pour que tout fonctionne, mais maintenant nous
divisons cette application en plusieurs composants, ce que vous faites généralement dans les applications React et React
Native, tout comme vous le faites dans React pour les applications Web, car cela maintient vos composants plus légers,
plus ciblés et votre code plus organisé et plus facile à comprendre.