1 00:00:02,250 --> 00:00:03,310 Hai avuto successo? 2 00:00:03,350 --> 00:00:04,710 Facciamolo assieme. 3 00:00:04,710 --> 00:00:11,390 Creiamo un nuovo componente qui nell'input dell'obiettivo importando React da React e poi qui, 4 00:00:11,500 --> 00:00:14,040 chiamerò questo input dell'obiettivo 5 00:00:14,040 --> 00:00:20,610 e mi piace questa sintassi costante qui, potresti usare l'input dell'obiettivo della funzione per 6 00:00:20,610 --> 00:00:28,120 creare il tuo componente funzionale, andrebbe bene pure. Quindi qui, esporterò l'input obiettivo predefinito e ora qui, dobbiamo restituire 7 00:00:28,120 --> 00:00:31,030 qualcosa e che qualcosa è alla fine questa vista 8 00:00:31,030 --> 00:00:33,700 con l'inserimento di testo e il pulsante. 9 00:00:34,090 --> 00:00:42,650 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 10 00:00:42,650 --> 00:00:50,110 dobbiamo importare di nuovo elementi da React Native perché stiamo usando un paio di componenti da React Native , stiamo 11 00:00:50,110 --> 00:00:55,840 usando il componente view, stiamo usando il componente input testo, stiamo usando il componente button e 12 00:00:55,840 --> 00:01:00,460 voglio anche usare il componente foglio di stile per impostare il mio 13 00:01:00,460 --> 00:01:02,270 oggetto foglio di stile. 14 00:01:02,470 --> 00:01:10,510 Quindi, aggiungiamo gli stili qui con il foglio di stile. creare, passare un oggetto a quel foglio di stile. creare un metodo e 15 00:01:11,140 --> 00:01:16,840 ovviamente prendere gli stili dall'app. js file, che sarebbe il contenitore di input e l'input, 16 00:01:16,840 --> 00:01:21,540 quindi taglia entrambi in modo che rimanga solo lo schermo qui e di nuovo in input obiettivo, aggiungerò 17 00:01:21,730 --> 00:01:28,510 entrambi qui al mio foglio di stile in modo che funzioni di nuovo. Ciò che non funzionerà in questo momento è 18 00:01:28,510 --> 00:01:37,840 che quando tocchiamo il pulsante, lo aggiungiamo perché qui, non abbiamo lo stato nell'input dell'obiettivo e quando tocco il pulsante, in realtà 19 00:01:37,870 --> 00:01:42,790 voglio fare qualcosa in app. js. 20 00:01:42,910 --> 00:01:49,480 Quindi, prima di tutto, dobbiamo dividere lo stato. L'obiettivo inserito non deve essere gestito in app. js ma dovrebbe essere 21 00:01:49,480 --> 00:01:54,040 gestito nell'input dell'obiettivo perché è lì che abbiamo l'inserimento del testo 22 00:01:54,040 --> 00:02:01,360 alla fine che è dove l'utente inserisce l'obiettivo. Quindi aggiungiamo useState import qui nell'input dell'obiettivo e quindi aggiungiamo la 23 00:02:01,360 --> 00:02:08,950 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 24 00:02:08,950 --> 00:02:14,650 stringa vuota, aggiungiamolo qui all'input dell'obiettivo e dall'app. js file, prenderò anche il gestore dell'input dell'obiettivo, 25 00:02:14,650 --> 00:02:18,780 lo taglierò da lì e lo aggiungerò all'input dell'obiettivo qui, quindi questa 26 00:02:18,820 --> 00:02:24,910 funzione in una funzione a cui ci colleghiamo a onChangeText e ora con quello, recuperare l'input dell'utente dovrebbe 27 00:02:24,910 --> 00:02:26,490 funzionare di nuovo. 28 00:02:26,740 --> 00:02:32,660 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 29 00:02:32,680 --> 00:02:38,360 dovrebbe rimanere qui perché devo gestire l'elenco qui perché l'app. Il file js è l'unico componente 30 00:02:38,560 --> 00:02:44,350 che avrà accesso all'input dell'obiettivo e alla FlatList in cui abbiamo prodotto gli obiettivi e, 31 00:02:44,350 --> 00:02:52,950 parlando di ciò, possiamo già importare gli input degli obiettivi nell'app. js dall'input obiettivo dei componenti e aggiungi l'input 32 00:02:52,950 --> 00:03:02,010 obiettivo come componente qui sopra la FlatList ma, di nuovo, ora dobbiamo essere in grado di scoprire quando viene 33 00:03:02,010 --> 00:03:06,790 premuto un pulsante in questo componente e in React, lo 34 00:03:06,790 --> 00:03:14,740 fai passando la funzione che il bambino il componente dovrebbe essere eseguito eventualmente come prop al 35 00:03:14,740 --> 00:03:16,150 componente figlio. 36 00:03:16,150 --> 00:03:20,850 Quindi qui, potremmo aggiungere su AddGoal, quel nome dipende totalmente da te, è 37 00:03:20,860 --> 00:03:22,230 un sostegno che 38 00:03:22,840 --> 00:03:25,990 definisci e questo indica il gestore degli obiettivi. 39 00:03:26,030 --> 00:03:32,980 Questo da solo non farà altro che onAddGoal ora verrà ricevuto come prop all'interno dell'input dell'obiettivo e indicherà una 40 00:03:32,980 --> 00:03:37,520 funzione, il che significa che possiamo eseguirla come una funzione lì. 41 00:03:37,540 --> 00:03:41,550 Quindi in input obiettivo, lì sulla stampa, posso 42 00:03:41,950 --> 00:03:45,990 semplicemente puntare su prop. onAddGoal, giusto? 43 00:03:46,000 --> 00:03:51,370 Perché onAddGoal è quel nome prop che sto impostando qui nell'app. file js, che viene ricevuto all'interno dell'input 44 00:03:51,370 --> 00:03:57,430 dell'obiettivo sull'oggetto oggetti di scena che stiamo ottenendo in ogni componente funzionale e punti onAddGoal in una 45 00:03:57,430 --> 00:04:00,200 funzione, quindi possiamo passarlo a onPress in modo 46 00:04:00,330 --> 00:04:05,630 che onPress o React Native sappiano quindi che dovrebbe chiamare questa funzione quando premiamo 47 00:04:05,630 --> 00:04:06,470 il 48 00:04:06,550 --> 00:04:09,430 pulsante, è così che fai in React Native. 49 00:04:09,430 --> 00:04:17,150 Tuttavia avremmo un problema perché in Aggiungi gestore obiettivo, mi riferisco all'obiettivo immesso e che precedentemente era gestito qui ma non lo è più, 50 00:04:17,170 --> 00:04:19,670 abbiamo gestito l'obiettivo immesso che è l'inserimento 51 00:04:19,750 --> 00:04:26,340 di testo inserito dall'utente in obiettivo inserisci ora e non nell'app. 52 00:04:26,340 --> 00:04:26,340 js. 53 00:04:26,950 --> 00:04:32,620 Quindi aggiungere il gestore degli obiettivi ora dovrebbe effettivamente ricevere un argomento che è il titolo dell'obiettivo o come 54 00:04:32,620 --> 00:04:33,160 si 55 00:04:33,190 --> 00:04:37,530 desidera nominarlo, questo nome dipende da te ed è quello che memorizziamo come valore qui. 56 00:04:37,540 --> 00:04:47,700 Ora dobbiamo assicurarci di inoltrare questo argomento quando su aggiungi obiettivo viene eseguito nell'input obiettivo. 57 00:04:48,870 --> 00:04:55,350 Quindi ciò accade qui su una macchina da stampa e qui puntiamo a questo per impostare anche un argomento 58 00:04:55,350 --> 00:04:58,410 che alla fine dovrebbe essere passato, otteniamo due 59 00:04:58,410 --> 00:05:02,620 opzioni, l'opzione uno è che qui abbiamo impostato una funzione freccia anonima. 60 00:05:02,640 --> 00:05:08,250 Ora questa funzione freccia verrà eseguita alla fine e quindi ora possiamo aggiungere parentesi 61 00:05:08,250 --> 00:05:09,930 qui perché ora non 62 00:05:09,960 --> 00:05:16,050 verrà eseguita quando questa viene visualizzata per prima, invece questa funzione freccia verrà registrata come 63 00:05:16,050 --> 00:05:17,730 funzione da eseguire 64 00:05:17,730 --> 00:05:25,230 per onPress e ora qui in onAddGoal, possiamo inoltrare l'obiettivo immesso, ad esempio, che funzionerebbe o, in alternativa, non 65 00:05:25,290 --> 00:05:30,690 utilizziamo questo approccio con la funzione di freccia anonima e quindi non possiamo 66 00:05:30,690 --> 00:05:38,790 aggiungere parentesi qui, ma quindi possiamo usare un'altra funzione Javascript, sulle funzioni che possiamo chiamare associare preconfigurare alcuni argomenti che 67 00:05:39,120 --> 00:05:43,560 alla fine dovrebbero essere passati quando viene eseguita questa funzione. 68 00:05:43,560 --> 00:05:47,190 Il primo argomento è sempre quello a cui dovrebbe fare riferimento questa parola chiave. 69 00:05:47,190 --> 00:05:52,680 Questo non ha importanza per noi qui, quindi possiamo semplicemente scrivere questo, ma il secondo argomento qui o 70 00:05:52,680 --> 00:05:58,440 tutti gli altri argomenti in seguito in realtà saranno gli argomenti ricevuti da questa funzione quando viene chiamata e 71 00:05:58,440 --> 00:06:00,270 viene richiamata premendo un pulsante. 72 00:06:00,270 --> 00:06:06,210 Quindi questi sono ora gli argomenti che vengono inoltrati alla funzione onAddGoal che alla fine è solo 73 00:06:06,210 --> 00:06:10,600 la nostra funzione di aggiunta del gestore degli obiettivi e lì, abbiamo 74 00:06:10,620 --> 00:06:12,080 bisogno del titolo 75 00:06:12,120 --> 00:06:17,740 dell'obiettivo, quindi dobbiamo inoltrarlo, quindi qui, ora posso impostare inserito obiettivo come argomento da inoltrare e 76 00:06:17,940 --> 00:06:20,760 questa è la normale sintassi Javascript vaniglia qui. 77 00:06:21,850 --> 00:06:24,740 E ora con questo, viene reso, sembra buono 78 00:06:24,740 --> 00:06:25,920 e se entro 79 00:06:26,090 --> 00:06:31,340 imparo React Native, ottengo ancora l'output qui. In modo che tutto funzioni, ma ora abbiamo 80 00:06:31,340 --> 00:06:36,770 diviso questa app in più componenti che è quello che fai di solito nelle app React e nelle 81 00:06:36,770 --> 00:06:42,740 app React Native proprio come fai in React per le app web perché mantiene i tuoi componenti più snelli, più 82 00:06:42,800 --> 00:06:46,550 concentrati e il tuo codice più organizzato e più facile da capire.