Ora per visualizzare il nostro elenco di obiettivi, qui nella vista, voglio semplicemente produrre un paio di componenti di testo per ora in
cui semplicemente stampo il mio obiettivo e per farlo, possiamo inserire un'espressione dinamica qui con singole parentesi graffe di apertura e chiusura e ora ci
riferiamo agli obiettivi del corso,
che è questa variabile che abbiamo ottenuto qui con la destrutturazione dell'array. Gli obiettivi del corso sono la nostra gamma di obiettivi e
ora, proprio come in React normale,
che è una differenziazione che non mi piace molto perché alla fine stiamo usando React normale, quindi proprio
come lo sai
da React per i progetti web, ora puoi mappare questo array di dati in un array di componenti con
il metodo map, che è un normale metodo Javascript. Il metodo map utilizza una funzione che viene eseguita
su ogni elemento dell'array, quindi
qui otteniamo
il nostro obiettivo e quindi deve restituire un nuovo componente qui. Anche in questo caso userò questa sintassi della funzione freccia
in linea dove invece di avere parentesi graffe e poi restituire qualcosa, ometto le parentesi graffe e ometto
la dichiarazione di ritorno, questa è una sintassi Javascript valida, restituirà
anche tutto ciò che inserisco qui.
Quello che voglio restituire è un componente di testo, quindi
questo componente di testo che abbiamo importato da React Native e con questo, ora possiamo produrre il nostro obiettivo qui perché un obiettivo in corso gli obiettivi
sarà solo un testo perché ciò che aggiungiamo agli obiettivi del corso è il obiettivo inserito e l'obiettivo inserito
è ciò che otteniamo dall'inserimento di testo e questo è solo testo.
Quindi qui, ora stiamo solo trasmettendo del testo e sto mappando tutti i miei obiettivi del corso in
componenti di testo che verranno visualizzati in questa vista qui. E con ciò se salviamo questo, dovremmo già
essere in
grado di iniziare ad aggiungere alcuni obiettivi, quindi imparare React Native è una cosa che posso inserire qui,
premere Aggiungi ed
eccolo, impararlo per davvero e lo otteniamo anche se vuoi anche
fare dei pancake, puoi farlo anche tu e ovviamente, questo funziona anche
su iOS, impara React Native sul serio e, naturalmente, voglio ancora fare dei pancake.
Quindi funziona e questo è il modo in cui possiamo produrre un elenco semplice e molto banale di elementi qui.
Ora, ovviamente, questi articoli sembrano piuttosto noiosi, quindi forse possiamo applicare un po 'di stile
lì per renderli migliori. Prima di farlo, tuttavia, ti
preghiamo di notare che abbiamo un errore qui nel nostro terminale.
Ora la nostra app funziona chiaramente, ma l'errore che stiamo ottenendo qui è che ogni bambino in un elenco
dovrebbe avere un supporto chiave univoco e questa è una normale regola di React, nulla di specifico di React Native.
In effetti, dovresti sempre, quando si associa questo a un elenco di widget, assegnare qui una chiave in modo che React sia in grado
di aggiornare efficacemente questo elenco dietro le quinte, se necessario. Puoi farlo aggiungendo un oggetto chiave qui e quindi la
chiave dovrebbe essere un identificatore univoco, per ora
andiamo con l'obiettivo stesso che non è strettamente unico, potresti inserire lo stesso
obiettivo con lo stesso testo due volte che ti darebbe un errore ma
per ora supponiamo che tu non lo
stia facendo, quindi possiamo usare l'obiettivo come chiave e se lo facciamo, ci libereremo di quell'avvertimento.
Se ora ho imparato React Native, posso aggiungerlo senza errori.
Ancora una volta se aggiungo lo stesso testo due volte, tecnicamente non ottengo nemmeno un errore qui, ma questo
sarebbe
sbagliato, eccolo qui, ecco l'errore perché ho due figli con la stessa chiave.
Quindi, per ora supponiamo che tu non lo
faccia, questa è la normale regola chiave che hai anche in React normale.
Quindi supponiamo semplicemente che non inserisci lo stesso obiettivo due volte e continuiamo con lo stile di questi elementi
perché in questo momento, non sembrano troppo eccitanti.