1 00:00:02,380 --> 00:00:08,210 Quindi abbiamo già dato un'occhiata a una serie solida di basi di cui hai bisogno per creare app React Native, per 2 00:00:08,210 --> 00:00:10,050 lavorare con questi elementi costitutivi di 3 00:00:10,190 --> 00:00:13,460 base anche se ovviamente molte cose non sono ancora chiare, non 4 00:00:13,460 --> 00:00:17,660 abbiamo davvero dato un'occhiata più da vicino stile e layout e così via, ma una 5 00:00:17,780 --> 00:00:22,820 cosa che dovremmo assolutamente fare ora è anche esplorare come puoi costruire i tuoi componenti perché finora, 6 00:00:23,030 --> 00:00:25,780 abbiamo sempre lavorato nell'app. js file e sicuramente 7 00:00:26,000 --> 00:00:28,820 non costruirai app più grandi in un solo file, 8 00:00:28,820 --> 00:00:31,360 quel file diventerebbe super grande dopo tutto 9 00:00:31,430 --> 00:00:37,190 e se avessi un componente personalizzato che prevedi di ripetere, in questo momento dovremmo copiare e incollare 10 00:00:37,190 --> 00:00:38,420 il nostro codice. 11 00:00:38,660 --> 00:00:44,060 Quindi creiamo nuovi componenti e quindi qui nel progetto, aggiungerò una nuova cartella denominata componenti, il nome dipende da 12 00:00:44,060 --> 00:00:49,020 te ma poiché ho intenzione di archiviare alcuni componenti lì, il nome ha senso per me 13 00:00:49,710 --> 00:00:55,250 e lì, io desidera creare un componente per l'elemento dell'elenco e anche uno per la nostra area di input. 14 00:00:55,340 --> 00:01:00,320 Quindi creiamo due nuovi file e avrò una convenzione di denominazione per i file 15 00:01:00,320 --> 00:01:09,440 in cui comincio con i caratteri maiuscoli e avrò il mio obiettivo. js, ovviamente è un file Javascript e 16 00:01:09,440 --> 00:01:16,100 il mio GoalInput. file js. Ora entrambi manterranno il normale componente React, quindi 17 00:01:16,100 --> 00:01:21,830 iniziamo con l'oggetto obiettivo e quindi importiamo React da React, proprio come è necessario farlo in un progetto React per web. 18 00:01:21,830 --> 00:01:29,570 Quindi qui creerò il mio componente funzionale, oggetto obiettivo che ottiene oggetti di scena e che quindi deve 19 00:01:29,570 --> 00:01:36,000 restituire un po 'di jsx qui ed esporterò questo come predefinito, proprio come questo. 20 00:01:36,090 --> 00:01:42,030 Ora il jsx che voglio rendere lì deve usare i componenti React Native o altri componenti personalizzati che a loro 21 00:01:42,060 --> 00:01:44,570 volta usano i componenti React Native e qui andrò 22 00:01:44,730 --> 00:01:51,180 con questo contenuto che avevo qui. Quindi lo taglierò dall'app. file js e restituirlo 23 00:01:51,180 --> 00:01:51,790 qui. 24 00:01:52,450 --> 00:01:57,100 Ora per usarlo qui, dobbiamo importare vista e testo, quindi 25 00:01:57,100 --> 00:01:59,970 questi due componenti, da React Native. 26 00:01:59,980 --> 00:02:05,760 Quindi importiamo qui vista e testo da React-Native. 27 00:02:05,790 --> 00:02:10,410 Inoltre, sto impostando alcuni stili e voglio usare il foglio di 28 00:02:10,410 --> 00:02:20,110 stile, quindi lo importerò anche qui e quindi imposterò i miei stili costanti che potresti nominare in modo diverso ovviamente con la creazione del 29 00:02:20,380 --> 00:02:26,990 foglio di stile e tornerò indietro all'app. file js e prendi lo stile della mia lista qui, taglialo da lì e vai alla 30 00:02:26,990 --> 00:02:32,960 voce obiettivo e aggiungilo qui a questo oggetto che passo al foglio di stile. creare. 31 00:02:33,020 --> 00:02:39,140 Ora questo dovrebbe funzionare, ma ovviamente quello che sto esponendo qui non sarà più sui dati degli articoli, invece aspettiamo che 32 00:02:39,500 --> 00:02:46,550 lo prendiamo semplicemente come oggetti di scena, quindi entrambi propongono i bambini in modo che possano essere passati tra il tag di apertura e 33 00:02:46,550 --> 00:02:53,210 chiusura del nostro componente personalizzato o forse oggetti di scena. titolo, qualunque cosa tu voglia, un nome 34 00:02:53,210 --> 00:02:59,770 prop a tua scelta allora. Ora possiamo utilizzare il nostro 35 00:02:59,770 --> 00:03:06,580 componente personalizzato, l'elemento obiettivo tornando all'app. js file e qui aggiungerò l'importazione all'elemento obiettivo con una G maiuscola, 36 00:03:06,580 --> 00:03:15,370 in modo che React riconosca questo come componente personalizzato da. / components / GoalItem, puoi omettere il file. js e ora possiamo usare l'oggetto obiettivo 37 00:03:15,370 --> 00:03:24,550 qui sotto nell'oggetto di rendering come componente personalizzato, in questo caso un componente a chiusura automatica perché poiché sto usando il titolo degli oggetti 38 00:03:24,610 --> 00:03:30,220 di scena e non i bambini degli oggetti di scena, non mi aspetto nulla tra 39 00:03:30,220 --> 00:03:37,660 l'apertura e la chiusura tag del mio componente personalizzato. Tuttavia, mi aspetto un titolo, quindi impostalo qui con il titolo 40 00:03:37,660 --> 00:03:43,360 e quindi qui, possiamo puntare ai dati dell'articolo, quindi ottenere l'accesso all'elemento che è un oggetto in 41 00:03:44,480 --> 00:03:53,210 cui abbiamo una chiave di valore e, con quello, dovremmo ancora vedere lo stesso di prima se inseriamo alcuni obiettivi qui, impariamo tutto su rn, sì, 42 00:03:54,870 --> 00:04:01,230 sta bene, ora con il nostro componente personalizzato. Ora ecco una buona pratica per inserire anche l'inserimento 43 00:04:01,260 --> 00:04:07,320 di testo e il pulsante o l'intera vista qui nel nostro componente di input dell'obiettivo e, naturalmente, 44 00:04:07,320 --> 00:04:12,810 dovrai anche collegare le comunicazioni tra l'app. Il file js e il componente di input dell'obiettivo 45 00:04:13,170 --> 00:04:18,930 devono essere informati quando gli utenti premono questo pulsante nel componente di input dell'obiettivo e quindi aggiungono i dati qui 46 00:04:18,930 --> 00:04:19,730 nell'app. file js. 47 00:04:20,280 --> 00:04:25,260 È come lo faresti anche in un progetto React per Web, quindi se hai esperienza con 48 00:04:25,260 --> 00:04:30,860 questo, non dovrebbe essere un problema, altrimenti lo faremo insieme nella prossima lezione, ma se sai come farlo, prova 49 00:04:30,860 --> 00:04:32,250 sicuramente da solo adesso.