Quindi, nella schermata dell'elenco dei luoghi, voglio visualizzare un elenco di luoghi senza sorprese e per questo conosci
un componente di React Native che possiamo
importare e questo è l'elenco semplice. L'elenco piatto ovviamente è perfetto per
produrre un elenco.
Quindi qui tornerò alla lista piatta
ora e voglio ottenere l'accesso ai miei posti.
Questi sono memorizzati in Redux
in modo che possiamo o con l'aiuto di Redux, quindi possiamo importare React Redux qui o per essere precisi, da quel
pacchetto, importiamo usa il selettore perché ora nel nostro componente, possiamo usarlo per ottenere l'accesso ai dati memorizzato in Redux.
Quindi qui, voglio ottenere l'accesso ai miei luoghi con l'aiuto del
selettore d'uso, è un gioco da ragazzi, passiamo in quella funzione che riceve il nostro negozio
Redux, il nostro stato Redux che è memorizzato nel negozio lì e lì voglio ottenere l'accesso alla sezione dei
luoghi e qui uso i luoghi perché in app. js, ho usato i posti come identificatore qui, che ci porta alla sezione gestita con
il riduttore di luoghi e in quel riduttore, abbiamo un'altra chiave di
luoghi, quindi alla fine qui voglio accedere allo stato. posti. luoghi e con ciò, sappiamo
quale tipo di dati vogliamo inserire nell'elenco piatto.
Ancora una volta, aggiungerò anche un estrattore di chiavi qui per dire alla lista piatta dove trovare un ID univoco per ogni elemento
e per me che è nella proprietà ID di ogni luogo e
ovviamente dobbiamo aggiungere l'elemento di rendering, in modo da ottenere i nostri dati dei dati degli articoli e quindi l'output
di un componente per ogni articolo che vogliamo produrre.
Ora, per quello, creerò effettivamente un componente nuovo nella cartella componenti
e questo è PlaceItem. file js. Ora per risparmiare un po 'di tempo, ho attaccato il mio PlaceItem. file js a questa lezione e puoi semplicemente sostituire
il tuo o il contenuto del tuo con il mio ma ovviamente ti guiderò attraverso quello che sto
facendo lì.
Questo è un componente di base poiché lo abbiamo anche creato più volte durante questo corso, ho solo
il mio componente qui che è in grado di produrre un'immagine perché ne avremo bisogno in seguito, che quindi
ha una vista con due pezzi di testo che siediti accanto a
questa immagine, grazie allo stile che ho applicato laggiù. Lì, ho prodotto il titolo e l'indirizzo di quel
luogo, ovviamente quelle informazioni che non abbiamo ancora ma lo aggiungeremo in questo modulo e abbiamo un componente
di opacità tangibile attorno a questo in modo da poter premere ogni luogo e quando lo premiamo,
attiviamo una funzione che ci aspettiamo di ottenere sul puntale selezionato.
Ora nel mio stile qui, ho impostato questo in modo tale che l'immagine e questo blocco di testo
si trovino uno accanto all'altro in una riga qui con una riga di direzione flessibile, l'immagine è quindi l'immagine arrotondata,
quindi è un'immagine arrotondata, è un cerchio con un colore di sfondo completo nel caso in cui non abbiamo ancora un'immagine che
ovviamente puoi anche cambiare ad esempio con questo colore grigiastro. Quindi abbiamo il contenitore informazioni che è il
contenitore che contiene i due pezzi di testo che ora sono organizzati in una colonna uno
sopra l'altro e quindi abbiamo il titolo che è un po 'più grande dell'indirizzo e lì,
in realtà voglio anche usare nero come colore del testo. Questa è la configurazione che userò qui e
questo è l'elemento del luogo che
ora possiamo importare nella schermata dell'elenco dei luoghi, quindi lì possiamo importare l'elemento del luogo dai componenti e posizionarlo qui in elementi di rendering.
Quindi lì voglio produrre un oggetto posto come componente a chiusura automatica e ora posizionare un oggetto, questo nuovo
componente necessita di alcuni dati di input. Dobbiamo passare un puntello su selezione che
indica una funzione che dovrebbe essere eseguita quando tocchiamo un'icona. Dobbiamo passare un oggetto di immagine, un titolo e un indirizzo, quindi
quattro oggetti che devono essere forniti. Quindi facciamolo qui. Per l'immagine, non abbiamo ancora
un'immagine, quindi qui passerò a null per il momento. Per il titolo, possiamo farlo ovviamente,
possiamo puntare a itemData. articolo. titolo perché un singolo articolo è solo un articolo che segue
il nostro modello di luogo e che ovviamente ha un oggetto di proprietà del titolo, quindi possiamo accedervi in sicurezza. Per l'indirizzo, non lo abbiamo ancora, quindi lo
imposterò su
null e per
su select, beh, ovviamente possiamo
impostarlo, lì voglio andare
a una nuova pagina dopo tutto. Quindi possiamo farlo con una funzione inline anonima qui o con una
funzione con nome memorizzata in una costante separata,
qualunque cosa tu voglia,
la farò in linea e lì posso usare oggetti di scena. navigazione. naviga e vai alla schermata dei dettagli del
luogo con l'identificatore dei dettagli del luogo che ovviamente nel mio navigatore è questo identificatore qui e
là
voglio anche passare alcuni dati extra, alcuni parametri, quindi passerò un secondo argomento qui per navigare e lì sono due informazioni che
voglio passare, questo è il titolo del luogo
e quello ovviamente è itemData. articolo. titolo, quindi esattamente la
stessa cosa che sto inserendo nella proprietà del titolo qui e che è anche
l'ID del luogo che è itemData. articolo. id e abbiamo
già quell'ID, quindi è già qualcosa
che stiamo generando quando aggiungiamo un nuovo posto. Detto questo, abbiamo un oggetto luogo che ci porta
alla schermata dei dettagli del luogo e poiché abbiamo già uno scheletro di base in quello schermo,
dovremmo essere in grado di vederlo.
Una cosa che aggiungerò alla schermata dei dettagli del luogo è tuttavia la mia configurazione delle opzioni di navigazione in
cui ho bisogno di quella funzione dinamica che quindi restituisce un oggetto di configurazione perché lì voglio impostare il titolo dell'intestazione in
base ai parametri che sto ricevendo perché nell'elenco dei luoghi schermo, sto passando il titolo di un posto e
il parametro ID posto a questa nuova schermata. Posizionare il titolo è quello che voglio estrarre e impostare qui
nella mia
intestazione, quindi lì posso impostare il titolo dell'intestazione su navData. navigazione. getParam posiziona il titolo
in modo da avere questo titolo nell'intestazione. E ora con quello, proviamo, salviamo
tutto e aggiungiamo un nuovo posto, un test. Fai clic su Salva luogo, torniamo indietro e lo vediamo qui se lo
tocco, andiamo alla schermata dei dettagli dove lo vediamo nell'intestazione. Proviamo anche su Android con un test,
salvalo, fai clic su di esso e tutto funziona. Questo è il flusso di base per questo, ma una
cosa che ancora non abbiamo ancora fatto è usare alcune funzionalità native.
Quindi ora è davvero il momento di farlo e voglio iniziare con la fotocamera.