Hai avuto successo?
Facciamolo assieme.
Creiamo un nuovo componente qui nell'input dell'obiettivo importando React da React e poi qui,
chiamerò questo input dell'obiettivo
e mi piace questa sintassi costante qui, potresti usare l'input dell'obiettivo della funzione per
creare il tuo componente funzionale, andrebbe bene pure. Quindi qui, esporterò l'input obiettivo predefinito e ora qui, dobbiamo restituire
qualcosa e che qualcosa è alla fine questa vista
con l'inserimento di testo e il pulsante.
Consentitemi quindi di afferrare l'intera vista, restituirla qui tra parentesi in modo che sia scritta su più righe e ben formattata e, naturalmente, ora
dobbiamo importare di nuovo elementi da React Native perché stiamo usando un paio di componenti da React Native , stiamo
usando il componente view, stiamo usando il componente input testo, stiamo usando il componente button e
voglio anche usare il componente foglio di stile per impostare il mio
oggetto foglio di stile.
Quindi, aggiungiamo gli stili qui con il foglio di stile. creare, passare un oggetto a quel foglio di stile. creare un metodo e
ovviamente prendere gli stili dall'app. js file, che sarebbe il contenitore di input e l'input,
quindi taglia entrambi in modo che rimanga solo lo schermo qui e di nuovo in input obiettivo, aggiungerò
entrambi qui al mio foglio di stile in modo che funzioni di nuovo. Ciò che non funzionerà in questo momento è
che quando tocchiamo il pulsante, lo aggiungiamo perché qui, non abbiamo lo stato nell'input dell'obiettivo e quando tocco il pulsante, in realtà
voglio fare qualcosa in app. js.
Quindi, prima di tutto, dobbiamo dividere lo stato. L'obiettivo inserito non deve essere gestito in app. js ma dovrebbe essere
gestito nell'input dell'obiettivo perché è lì che abbiamo l'inserimento del testo
alla fine che è dove l'utente inserisce l'obiettivo. Quindi aggiungiamo useState import qui nell'input dell'obiettivo e quindi aggiungiamo la
nostra logica di gestione dello stato qui con l'obiettivo inserito e impostiamo l'obiettivo immesso che otteniamo da useState che abbiamo inizializzato con una
stringa vuota, aggiungiamolo qui all'input dell'obiettivo e dall'app. js file, prenderò anche il gestore dell'input dell'obiettivo,
lo taglierò da lì e lo aggiungerò all'input dell'obiettivo qui, quindi questa
funzione in una funzione a cui ci colleghiamo a onChangeText e ora con quello, recuperare l'input dell'utente dovrebbe
funzionare di nuovo.
Ora per il pulsante, quando lo premiamo, voglio attivare una funzione nell'app. js, voglio attivare il gestore degli obiettivi di aggiunta e tale funzione
dovrebbe rimanere qui perché devo gestire l'elenco qui perché l'app. Il file js è l'unico componente
che avrà accesso all'input dell'obiettivo e alla FlatList in cui abbiamo prodotto gli obiettivi e,
parlando di ciò, possiamo già importare gli input degli obiettivi nell'app. js dall'input obiettivo dei componenti e aggiungi l'input
obiettivo come componente qui sopra la FlatList ma, di nuovo, ora dobbiamo essere in grado di scoprire quando viene
premuto un pulsante in questo componente e in React, lo
fai passando la funzione che il bambino il componente dovrebbe essere eseguito eventualmente come prop al
componente figlio.
Quindi qui, potremmo aggiungere su AddGoal, quel nome dipende totalmente da te, è
un sostegno che
definisci e questo indica il gestore degli obiettivi.
Questo da solo non farà altro che onAddGoal ora verrà ricevuto come prop all'interno dell'input dell'obiettivo e indicherà una
funzione, il che significa che possiamo eseguirla come una funzione lì.
Quindi in input obiettivo, lì sulla stampa, posso
semplicemente puntare su prop. onAddGoal, giusto?
Perché onAddGoal è quel nome prop che sto impostando qui nell'app. file js, che viene ricevuto all'interno dell'input
dell'obiettivo sull'oggetto oggetti di scena che stiamo ottenendo in ogni componente funzionale e punti onAddGoal in una
funzione, quindi possiamo passarlo a onPress in modo
che onPress o React Native sappiano quindi che dovrebbe chiamare questa funzione quando premiamo
il
pulsante, è così che fai in React Native.
Tuttavia avremmo un problema perché in Aggiungi gestore obiettivo, mi riferisco all'obiettivo immesso e che precedentemente era gestito qui ma non lo è più,
abbiamo gestito l'obiettivo immesso che è l'inserimento
di testo inserito dall'utente in obiettivo inserisci ora e non nell'app.
js.
Quindi aggiungere il gestore degli obiettivi ora dovrebbe effettivamente ricevere un argomento che è il titolo dell'obiettivo o come
si
desidera nominarlo, questo nome dipende da te ed è quello che memorizziamo come valore qui.
Ora dobbiamo assicurarci di inoltrare questo argomento quando su aggiungi obiettivo viene eseguito nell'input obiettivo.
Quindi ciò accade qui su una macchina da stampa e qui puntiamo a questo per impostare anche un argomento
che alla fine dovrebbe essere passato, otteniamo due
opzioni, l'opzione uno è che qui abbiamo impostato una funzione freccia anonima.
Ora questa funzione freccia verrà eseguita alla fine e quindi ora possiamo aggiungere parentesi
qui perché ora non
verrà eseguita quando questa viene visualizzata per prima, invece questa funzione freccia verrà registrata come
funzione da eseguire
per onPress e ora qui in onAddGoal, possiamo inoltrare l'obiettivo immesso, ad esempio, che funzionerebbe o, in alternativa, non
utilizziamo questo approccio con la funzione di freccia anonima e quindi non possiamo
aggiungere parentesi qui, ma quindi possiamo usare un'altra funzione Javascript, sulle funzioni che possiamo chiamare associare preconfigurare alcuni argomenti che
alla fine dovrebbero essere passati quando viene eseguita questa funzione.
Il primo argomento è sempre quello a cui dovrebbe fare riferimento questa parola chiave.
Questo non ha importanza per noi qui, quindi possiamo semplicemente scrivere questo, ma il secondo argomento qui o
tutti gli altri argomenti in seguito in realtà saranno gli argomenti ricevuti da questa funzione quando viene chiamata e
viene richiamata premendo un pulsante.
Quindi questi sono ora gli argomenti che vengono inoltrati alla funzione onAddGoal che alla fine è solo
la nostra funzione di aggiunta del gestore degli obiettivi e lì, abbiamo
bisogno del titolo
dell'obiettivo, quindi dobbiamo inoltrarlo, quindi qui, ora posso impostare inserito obiettivo come argomento da inoltrare e
questa è la normale sintassi Javascript vaniglia qui.
E ora con questo, viene reso, sembra buono
e se entro
imparo React Native, ottengo ancora l'output qui. In modo che tutto funzioni, ma ora abbiamo
diviso questa app in più componenti che è quello che fai di solito nelle app React e nelle
app React Native proprio come fai in React per le app web perché mantiene i tuoi componenti più snelli, più
concentrati e il tuo codice più organizzato e più facile da capire.