1
00:00:02,070 --> 00:00:07,410
Quindi, nella schermata dell'elenco dei luoghi, voglio visualizzare un elenco di luoghi senza sorprese e per questo conosci

2
00:00:07,550 --> 00:00:09,780
un componente di React Native che possiamo

3
00:00:09,780 --> 00:00:14,010
importare e questo è l'elenco semplice. L'elenco piatto ovviamente è perfetto per

4
00:00:14,040 --> 00:00:15,620
produrre un elenco.

5
00:00:15,780 --> 00:00:18,570
Quindi qui tornerò alla lista piatta

6
00:00:18,900 --> 00:00:21,890
ora e voglio ottenere l'accesso ai miei posti.

7
00:00:21,930 --> 00:00:23,970
Questi sono memorizzati in Redux

8
00:00:23,970 --> 00:00:30,960
in modo che possiamo o con l'aiuto di Redux, quindi possiamo importare React Redux qui o per essere precisi, da quel

9
00:00:30,960 --> 00:00:37,740
pacchetto, importiamo usa il selettore perché ora nel nostro componente, possiamo usarlo per ottenere l'accesso ai dati memorizzato in Redux.

10
00:00:37,740 --> 00:00:41,630
Quindi qui, voglio ottenere l'accesso ai miei luoghi con l'aiuto del

11
00:00:41,640 --> 00:00:47,190
selettore d'uso, è un gioco da ragazzi, passiamo in quella funzione che riceve il nostro negozio

12
00:00:47,190 --> 00:00:53,490
Redux, il nostro stato Redux che è memorizzato nel negozio lì e lì voglio ottenere l'accesso alla sezione dei

13
00:00:53,490 --> 00:00:59,880
luoghi e qui uso i luoghi perché in app. js, ho usato i posti come identificatore qui, che ci porta alla sezione gestita con

14
00:01:00,240 --> 00:01:02,880
il riduttore di luoghi e in quel riduttore, abbiamo un'altra chiave di

15
00:01:03,000 --> 00:01:09,870
luoghi, quindi alla fine qui voglio accedere allo stato. posti. luoghi e con ciò, sappiamo

16
00:01:09,870 --> 00:01:12,660
quale tipo di dati vogliamo inserire nell'elenco piatto.

17
00:01:12,660 --> 00:01:19,800
Ancora una volta, aggiungerò anche un estrattore di chiavi qui per dire alla lista piatta dove trovare un ID univoco per ogni elemento

18
00:01:19,800 --> 00:01:23,480
e per me che è nella proprietà ID di ogni luogo e

19
00:01:23,490 --> 00:01:29,820
ovviamente dobbiamo aggiungere l'elemento di rendering, in modo da ottenere i nostri dati dei dati degli articoli e quindi l'output

20
00:01:29,820 --> 00:01:32,920
di un componente per ogni articolo che vogliamo produrre.

21
00:01:33,060 --> 00:01:38,730
Ora, per quello, creerò effettivamente un componente nuovo nella cartella componenti

22
00:01:38,790 --> 00:01:47,910
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

23
00:01:48,180 --> 00:01:53,040
il tuo o il contenuto del tuo con il mio ma ovviamente ti guiderò attraverso quello che sto

24
00:01:53,040 --> 00:01:53,790
facendo lì.

25
00:01:53,910 --> 00:01:59,520
Questo è un componente di base poiché lo abbiamo anche creato più volte durante questo corso, ho solo

26
00:01:59,520 --> 00:02:05,460
il mio componente qui che è in grado di produrre un'immagine perché ne avremo bisogno in seguito, che quindi

27
00:02:05,520 --> 00:02:09,240
ha una vista con due pezzi di testo che siediti accanto a

28
00:02:09,270 --> 00:02:15,930
questa immagine, grazie allo stile che ho applicato laggiù. Lì, ho prodotto il titolo e l'indirizzo di quel

29
00:02:15,930 --> 00:02:21,900
luogo, ovviamente quelle informazioni che non abbiamo ancora ma lo aggiungeremo in questo modulo e abbiamo un componente

30
00:02:21,900 --> 00:02:27,720
di opacità tangibile attorno a questo in modo da poter premere ogni luogo e quando lo premiamo,

31
00:02:27,720 --> 00:02:31,400
attiviamo una funzione che ci aspettiamo di ottenere sul puntale selezionato.

32
00:02:31,440 --> 00:02:36,990
Ora nel mio stile qui, ho impostato questo in modo tale che l'immagine e questo blocco di testo

33
00:02:36,990 --> 00:02:43,230
si trovino uno accanto all'altro in una riga qui con una riga di direzione flessibile, l'immagine è quindi l'immagine arrotondata,

34
00:02:43,230 --> 00:02:49,860
quindi è un'immagine arrotondata, è un cerchio con un colore di sfondo completo nel caso in cui non abbiamo ancora un'immagine che

35
00:02:49,860 --> 00:02:56,310
ovviamente puoi anche cambiare ad esempio con questo colore grigiastro. Quindi abbiamo il contenitore informazioni che è il

36
00:02:56,310 --> 00:03:01,590
contenitore che contiene i due pezzi di testo che ora sono organizzati in una colonna uno

37
00:03:02,010 --> 00:03:07,290
sopra l'altro e quindi abbiamo il titolo che è un po 'più grande dell'indirizzo e lì,

38
00:03:07,290 --> 00:03:14,210
in realtà voglio anche usare nero come colore del testo. Questa è la configurazione che userò qui e

39
00:03:14,210 --> 00:03:17,330
questo è l'elemento del luogo che

40
00:03:17,330 --> 00:03:27,850
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.

41
00:03:27,850 --> 00:03:34,780
Quindi lì voglio produrre un oggetto posto come componente a chiusura automatica e ora posizionare un oggetto, questo nuovo

42
00:03:34,780 --> 00:03:40,630
componente necessita di alcuni dati di input. Dobbiamo passare un puntello su selezione che

43
00:03:40,630 --> 00:03:47,560
indica una funzione che dovrebbe essere eseguita quando tocchiamo un'icona. Dobbiamo passare un oggetto di immagine, un titolo e un indirizzo, quindi

44
00:03:47,560 --> 00:03:53,730
quattro oggetti che devono essere forniti. Quindi facciamolo qui. Per l'immagine, non abbiamo ancora

45
00:03:53,740 --> 00:03:59,500
un'immagine, quindi qui passerò a null per il momento. Per il titolo, possiamo farlo ovviamente,

46
00:03:59,590 --> 00:04:06,010
possiamo puntare a itemData. articolo. titolo perché un singolo articolo è solo un articolo che segue

47
00:04:06,010 --> 00:04:13,100
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

48
00:04:13,100 --> 00:04:14,470
imposterò su

49
00:04:14,780 --> 00:04:16,260
null e per

50
00:04:16,280 --> 00:04:18,440
su select, beh, ovviamente possiamo

51
00:04:18,440 --> 00:04:19,940
impostarlo, lì voglio andare

52
00:04:19,970 --> 00:04:25,070
a una nuova pagina dopo tutto. Quindi possiamo farlo con una funzione inline anonima qui o con una

53
00:04:25,070 --> 00:04:26,750
funzione con nome memorizzata in una costante separata,

54
00:04:27,200 --> 00:04:28,300
qualunque cosa tu voglia,

55
00:04:28,610 --> 00:04:35,440
la farò in linea e lì posso usare oggetti di scena. navigazione. naviga e vai alla schermata dei dettagli del

56
00:04:35,450 --> 00:04:40,580
luogo con l'identificatore dei dettagli del luogo che ovviamente nel mio navigatore è questo identificatore qui e

57
00:04:43,380 --> 00:04:43,950
là

58
00:04:43,980 --> 00:04:50,610
voglio anche passare alcuni dati extra, alcuni parametri, quindi passerò un secondo argomento qui per navigare e lì sono due informazioni che

59
00:04:50,610 --> 00:04:52,860
voglio passare, questo è il titolo del luogo

60
00:04:52,860 --> 00:04:57,680
e quello ovviamente è itemData. articolo. titolo, quindi esattamente la

61
00:04:57,750 --> 00:05:01,770
stessa cosa che sto inserendo nella proprietà del titolo qui e che è anche

62
00:05:01,770 --> 00:05:06,650
l'ID del luogo che è itemData. articolo. id e abbiamo

63
00:05:06,720 --> 00:05:08,890
già quell'ID, quindi è già qualcosa

64
00:05:08,910 --> 00:05:14,640
che stiamo generando quando aggiungiamo un nuovo posto. Detto questo, abbiamo un oggetto luogo che ci porta

65
00:05:14,640 --> 00:05:19,800
alla schermata dei dettagli del luogo e poiché abbiamo già uno scheletro di base in quello schermo,

66
00:05:19,950 --> 00:05:21,890
dovremmo essere in grado di vederlo.

67
00:05:21,960 --> 00:05:28,170
Una cosa che aggiungerò alla schermata dei dettagli del luogo è tuttavia la mia configurazione delle opzioni di navigazione in

68
00:05:28,170 --> 00:05:34,950
cui ho bisogno di quella funzione dinamica che quindi restituisce un oggetto di configurazione perché lì voglio impostare il titolo dell'intestazione in

69
00:05:34,950 --> 00:05:41,040
base ai parametri che sto ricevendo perché nell'elenco dei luoghi schermo, sto passando il titolo di un posto e

70
00:05:41,040 --> 00:05:47,070
il parametro ID posto a questa nuova schermata. Posizionare il titolo è quello che voglio estrarre e impostare qui

71
00:05:47,070 --> 00:05:47,890
nella mia

72
00:05:47,940 --> 00:05:56,040
intestazione, quindi lì posso impostare il titolo dell'intestazione su navData. navigazione. getParam posiziona il titolo

73
00:05:56,070 --> 00:06:02,910
in modo da avere questo titolo nell'intestazione. E ora con quello, proviamo, salviamo

74
00:06:02,910 --> 00:06:11,230
tutto e aggiungiamo un nuovo posto, un test. Fai clic su Salva luogo, torniamo indietro e lo vediamo qui se lo

75
00:06:11,230 --> 00:06:18,100
tocco, andiamo alla schermata dei dettagli dove lo vediamo nell'intestazione. Proviamo anche su Android con un test,

76
00:06:18,700 --> 00:06:26,070
salvalo, fai clic su di esso e tutto funziona. Questo è il flusso di base per questo, ma una

77
00:06:26,070 --> 00:06:30,300
cosa che ancora non abbiamo ancora fatto è usare alcune funzionalità native.

78
00:06:30,570 --> 00:06:34,710
Quindi ora è davvero il momento di farlo e voglio iniziare con la fotocamera.