Quindi abbiamo già dato un'occhiata a una serie solida di basi di cui hai bisogno per creare app React Native, per
lavorare con questi elementi costitutivi di
base anche se ovviamente molte cose non sono ancora chiare, non
abbiamo davvero dato un'occhiata più da vicino stile e layout e così via, ma una
cosa che dovremmo assolutamente fare ora è anche esplorare come puoi costruire i tuoi componenti perché finora,
abbiamo sempre lavorato nell'app. js file e sicuramente
non costruirai app più grandi in un solo file,
quel file diventerebbe super grande dopo tutto
e se avessi un componente personalizzato che prevedi di ripetere, in questo momento dovremmo copiare e incollare
il nostro codice.
Quindi creiamo nuovi componenti e quindi qui nel progetto, aggiungerò una nuova cartella denominata componenti, il nome dipende da
te ma poiché ho intenzione di archiviare alcuni componenti lì, il nome ha senso per me
e lì, io desidera creare un componente per l'elemento dell'elenco e anche uno per la nostra area di input.
Quindi creiamo due nuovi file e avrò una convenzione di denominazione per i file
in cui comincio con i caratteri maiuscoli e avrò il mio obiettivo. js, ovviamente è un file Javascript e
il mio GoalInput. file js. Ora entrambi manterranno il normale componente React, quindi
iniziamo con l'oggetto obiettivo e quindi importiamo React da React, proprio come è necessario farlo in un progetto React per web.
Quindi qui creerò il mio componente funzionale, oggetto obiettivo che ottiene oggetti di scena e che quindi deve
restituire un po 'di jsx qui ed esporterò questo come predefinito, proprio come questo.
Ora il jsx che voglio rendere lì deve usare i componenti React Native o altri componenti personalizzati che a loro
volta usano i componenti React Native e qui andrò
con questo contenuto che avevo qui. Quindi lo taglierò dall'app. file js e restituirlo
qui.
Ora per usarlo qui, dobbiamo importare vista e testo, quindi
questi due componenti, da React Native.
Quindi importiamo qui vista e testo da React-Native.
Inoltre, sto impostando alcuni stili e voglio usare il foglio di
stile, quindi lo importerò anche qui e quindi imposterò i miei stili costanti che potresti nominare in modo diverso ovviamente con la creazione del
foglio di stile e tornerò indietro all'app. file js e prendi lo stile della mia lista qui, taglialo da lì e vai alla
voce obiettivo e aggiungilo qui a questo oggetto che passo al foglio di stile. creare.
Ora questo dovrebbe funzionare, ma ovviamente quello che sto esponendo qui non sarà più sui dati degli articoli, invece aspettiamo che
lo prendiamo semplicemente come oggetti di scena, quindi entrambi propongono i bambini in modo che possano essere passati tra il tag di apertura e
chiusura del nostro componente personalizzato o forse oggetti di scena. titolo, qualunque cosa tu voglia, un nome
prop a tua scelta allora. Ora possiamo utilizzare il nostro
componente personalizzato, l'elemento obiettivo tornando all'app. js file e qui aggiungerò l'importazione all'elemento obiettivo con una G maiuscola,
in modo che React riconosca questo come componente personalizzato da. / components / GoalItem, puoi omettere il file. js e ora possiamo usare l'oggetto obiettivo
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
di scena e non i bambini degli oggetti di scena, non mi aspetto nulla tra
l'apertura e la chiusura tag del mio componente personalizzato. Tuttavia, mi aspetto un titolo, quindi impostalo qui con il titolo
e quindi qui, possiamo puntare ai dati dell'articolo, quindi ottenere l'accesso all'elemento che è un oggetto in
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ì,
sta bene, ora con il nostro componente personalizzato. Ora ecco una buona pratica per inserire anche l'inserimento
di testo e il pulsante o l'intera vista qui nel nostro componente di input dell'obiettivo e, naturalmente,
dovrai anche collegare le comunicazioni tra l'app. Il file js e il componente di input dell'obiettivo
devono essere informati quando gli utenti premono questo pulsante nel componente di input dell'obiettivo e quindi aggiungono i dati qui
nell'app. file js.
È come lo faresti anche in un progetto React per Web, quindi se hai esperienza con
questo, non dovrebbe essere un problema, altrimenti lo faremo insieme nella prossima lezione, ma se sai come farlo, prova
sicuramente da solo adesso.