1
00:00:02,080 --> 00:00:06,910
Per la posizione dell'utente, abbiamo creato un altro pacchetto integrato in expo che possiamo facilmente usare e

2
00:00:06,910 --> 00:00:08,740
che è un pacchetto di posizione.

3
00:00:08,780 --> 00:00:14,230
Ora, proprio come prima, lo installi seguendo le istruzioni qui e poi vedi anche un

4
00:00:14,230 --> 00:00:15,520
esempio di utilizzo

5
00:00:15,520 --> 00:00:17,130
laggiù, quindi facciamolo rapidamente.

6
00:00:17,140 --> 00:00:24,580
Eseguiamo expo install expo-location nel nostro progetto e con quello installato, ora possiamo anche aggiungere un

7
00:00:24,570 --> 00:00:27,580
altro componente, oltre al componente di

8
00:00:27,580 --> 00:00:33,340
selezione delle immagini, aggiungerò LocationPicker. js file perché è un'altra cosa che voglio essere in grado di fare

9
00:00:33,340 --> 00:00:38,920
in questa app, voglio essere in grado di scegliere una posizione. Per quello nel componente selettore di

10
00:00:38,920 --> 00:00:45,490
posizione, importerò ovviamente React da React perché alla fine sarà un normale componente React e importerò un paio

11
00:00:45,490 --> 00:00:54,040
di cose da React Native e tra queste c'è la vista, un pulsante che ci consente per iniziare a ottenere la posizione dell'utente,

12
00:00:54,040 --> 00:01:00,610
un po 'di testo, anche per mostrare un testo di fallback predefinito mentre nessun luogo è stato

13
00:01:00,610 --> 00:01:06,640
selezionato, un indicatore di attività per mostrare uno spinner mentre stiamo aspettando che venga recuperata la

14
00:01:07,300 --> 00:01:13,840
posizione e forse anche un avviso per mostrare un avviso se qualcosa va storto e anche il

15
00:01:13,840 --> 00:01:16,840
foglio di stile ovviamente per modellare questo componente.

16
00:01:16,860 --> 00:01:24,390
Ora qui, ho il mio componente selettore di posizione che riceve oggetti di scena e poi faremo

17
00:01:24,390 --> 00:01:33,390
qualcosa, impostando l'oggetto stili con il foglio di stile. creare e, alla fine, esportare qui il componente di

18
00:01:33,450 --> 00:01:40,870
selezione posizione come predefinito, in questo modo. Ora per quel componente, come dovrebbe essere il suo codice jsx?

19
00:01:40,940 --> 00:01:47,540
Alla fine, dipende da te, ma inizierò in modo molto semplice qui e avrò solo una vista

20
00:01:47,540 --> 00:01:48,460
con un

21
00:01:49,590 --> 00:01:56,580
pulsante che mi permetterà di iniziare a trovare la posizione dell'utente e anche un'altra vista che mostra ad

22
00:01:56,580 --> 00:02:04,080
esempio il mio testo di fallback, no posizione scelta ma che verrà successivamente sostituita per una piccola anteprima del luogo

23
00:02:04,110 --> 00:02:05,890
su una mappa, quindi

24
00:02:05,910 --> 00:02:10,010
è qualcosa che aggiungerò in seguito. Ora qui sul pulsante, quindi

25
00:02:13,220 --> 00:02:20,990
dirò ottenere la posizione dell'utente, ad esempio, impostare il colore su Colori. primario e per questo, come sempre, assicurati di importare i

26
00:02:20,990 --> 00:02:27,430
colori costantemente e fino a quando premo questo, non sorprende che voglia iniziare a recuperare la

27
00:02:27,430 --> 00:02:28,500
posizione dell'utente.

28
00:02:28,610 --> 00:02:38,180
Quindi qui aggiungerò una nuova costante, ottengo il gestore della posizione, che è una funzione che utilizzerà quindi l'API di posizione che abbiamo appena installato per

29
00:02:38,210 --> 00:02:43,760
ottenere la posizione dell'utente ed è ciò che innesco quando faccio clic su questo pulsante.

30
00:02:45,530 --> 00:02:57,040
Ora per lo styling qui, aggiungerò un selettore della posizione dello stile, in questa vista qui aggiungerò un'altra anteprima della mappa dello stile, potremmo

31
00:02:57,190 --> 00:03:03,790
anche dare uno stile a questo testo ma mi atterrò al valore predefinito e

32
00:03:03,790 --> 00:03:15,570
ora aggiungerò questi due stili a il foglio di stile, quindi qui selettore di posizione, lì aggiungerò un margine in fondo diciamo 15 e

33
00:03:15,570 --> 00:03:27,820
sull'anteprima della mappa, lì aggiungerò anche un margine in fondo diciamo 10 e la larghezza del 100% a prendi tutta la larghezza disponibile, un'altezza di forse

34
00:03:27,820 --> 00:03:33,380
150 e anche il colore del bordo di questo colore grigiastro

35
00:03:33,570 --> 00:03:41,310
con il codice esadecimale #ccc e una larghezza del bordo di uno, è un po 'come

36
00:03:41,540 --> 00:03:47,620
la finestra di anteprima dell'immagine. Con questo, abbiamo impostato questo componente, ora possiamo

37
00:03:47,620 --> 00:03:50,170
includerlo nella schermata del nuovo posto.

38
00:03:50,200 --> 00:04:00,970
Quindi, in quel componente dello schermo, importerò il selettore della posizione dai componenti, il selettore della posizione in questo modo e lo aggiungerò

39
00:04:00,970 --> 00:04:05,750
nel codice jsx sotto il selettore di immagini, proprio così.

40
00:04:05,900 --> 00:04:10,540
Se ora lo salviamo e diamo un'occhiata, vediamo questa casella qui.

41
00:04:10,560 --> 00:04:16,110
Ora, quando faccio clic su Ottieni posizione utente, non sorprende l'idea che inizi a ottenere la posizione dell'utente.

42
00:04:18,460 --> 00:04:26,110
Per questo, nel nostro componente selettore di posizione, dovremo importare alcune cose qui: importeremo tutto come posizione dal

43
00:04:26,200 --> 00:04:33,610
pacchetto di ubicazione expo che abbiamo appena installato. Inoltre per la posizione, proprio come

44
00:04:33,610 --> 00:04:40,030
per la fotocamera, dovremo richiedere i permessi, quindi importeremo tutto come permessi

45
00:04:40,060 --> 00:04:47,970
dalle autorizzazioni expo, che è anche richiesto. Con quello aggiunto qui nel gestore della posizione get, voglio prima di tutto controllare i miei

46
00:04:48,090 --> 00:04:54,540
permessi e, per questo, posso copiare l'approccio che uso nel selettore di immagini. Lì abbiamo questa funzione di verifica delle autorizzazioni che

47
00:04:54,540 --> 00:04:59,010
ovviamente potremmo quindi esternalizzare e scrivere in un modo più generico per lavorare in

48
00:04:59,010 --> 00:05:04,800
diversi componenti, qui lo copierò, verificherò le autorizzazioni. Ovviamente qui, non sto chiedendo il

49
00:05:04,800 --> 00:05:12,750
rullino fotografico ma una posizione e devi concedere le autorizzazioni di posizione per utilizzare questa app e ora verificare

50
00:05:12,750 --> 00:05:20,820
che le autorizzazioni vengano eseguite qui nel gestore get location. Possiamo usare async wait qui di nuovo per attendere il

51
00:05:20,850 --> 00:05:28,870
risultato di questo controllo, quindi l'autorizzazione è ciò che voglio controllare qui e, in caso contrario, quindi se non abbiamo le

52
00:05:29,020 --> 00:05:33,040
autorizzazioni, allora tornerò qui, non c'è è necessario continuare perché

53
00:05:33,040 --> 00:05:39,790
non ci sarà consentito comunque recuperare la posizione. Ora altrimenti possiamo continuare e ora possiamo usare

54
00:05:39,970 --> 00:05:47,680
il pacchetto di posizione per ottenere la posizione corrente asincrona e questo fa ciò che implica il nome,

55
00:05:47,680 --> 00:05:53,230
ottiene la posizione dell'utente corrente. Ora localizzare l'utente può richiedere del tempo, motivo per cui

56
00:05:53,230 --> 00:05:58,150
si tratta di un'attività asincrona e perché restituisce una promessa, una promessa che si risolverà una volta ottenuta

57
00:05:58,180 --> 00:06:04,230
la posizione dell'utente o che verrà rifiutata se non viene recuperata. Possiamo anche configurarlo con un oggetto

58
00:06:04,240 --> 00:06:09,400
che gli passi, di nuovo come sempre nei documenti ufficiali che hai imparato

59
00:06:09,400 --> 00:06:16,550
tutto su tutte le opzioni che puoi impostare lì. Ad esempio, un'opzione che puoi impostare è il timeout e

60
00:06:16,550 --> 00:06:22,670
impostarlo su cinque secondi per assicurarci che se non riusciamo a recuperare una posizione per cinque secondi, smettiamo

61
00:06:22,670 --> 00:06:23,870
di provare e

62
00:06:23,870 --> 00:06:27,260
lanciamo un errore, quindi la promessa verrà quindi respinta.

63
00:06:27,310 --> 00:06:34,930
Ora possiamo aspettarlo e, naturalmente, inserirlo in un blocco try catch, è importante assicurarsi di gestire gli errori

64
00:06:35,590 --> 00:06:42,610
se non riusciamo a recuperare una posizione. Qui userò semplicemente il componente di avviso

65
00:06:42,610 --> 00:06:52,410
che sto già importando per inviare un avviso, impossibile recuperare la posizione e quindi qui, riprovare più tardi o selezionare una

66
00:06:52,840 --> 00:06:59,940
posizione sulla mappa, che non è possibile in questo momento ma che noi ' Presto aggiungerò

67
00:06:59,940 --> 00:07:07,920
e qui un pulsante in cui diciamo OK. Quindi è un avviso che mostro se il recupero della posizione non riesce

68
00:07:08,880 --> 00:07:10,090
per qualche motivo,

69
00:07:10,130 --> 00:07:12,470
altrimenti qui mi aspetto di recuperare una posizione,

70
00:07:12,500 --> 00:07:15,200
quindi è il risultato di questa promessa alla fine,

71
00:07:15,200 --> 00:07:16,920
una posizione che possiamo usare.

72
00:07:17,120 --> 00:07:25,720
Ora possiamo quindi utilizzare questa posizione con l'aiuto dello stato d'uso per gestire alcuni stati interni qui, questa è

73
00:07:26,830 --> 00:07:36,250
la posizione selezionata e impostare la posizione selezionata e lì, possiamo chiamare lo stato d'uso che non ha un valore

74
00:07:36,250 --> 00:07:37,810
iniziale qui

75
00:07:37,810 --> 00:07:45,550
e poi qui nel gestore della posizione, possiamo impostare la posizione selezionata su qualcosa, dovremo vedere cosa

76
00:07:45,600 --> 00:07:52,230
per ora, su null ma prima di impostare qualcosa qui, in realtà consoliamo la

77
00:07:52,290 --> 00:07:57,530
posizione del registro per avere un'idea di ciò che c'è dentro.

78
00:07:57,540 --> 00:08:03,740
Ora voglio anche mostrare uno spinner mentre stiamo recuperando, quindi gestirò un altro stato qui e

79
00:08:03,740 --> 00:08:10,190
questo è lo stato di recupero e inizialmente, questo è ovviamente falso ma inizialmente non stiamo recuperando

80
00:08:10,220 --> 00:08:12,260
ma poi qui nella posizione

81
00:08:12,650 --> 00:08:19,670
get gestore, prima di iniziare a ottenere la posizione, imposterò il recupero su true e una volta che avremo

82
00:08:19,670 --> 00:08:21,090
finito e ciò

83
00:08:21,260 --> 00:08:24,410
includerà anche se avessimo un errore, quindi in

84
00:08:24,410 --> 00:08:31,640
seguito lo ripristineremo su false e ora possiamo usare è il recupero per mostrare uno spinner mentre stiamo recuperando.

85
00:08:31,640 --> 00:08:39,740
Quindi qui se il recupero è vero, mostrerò l'indicatore di attività e solo altrimenti, mostrerò questo testo e in

86
00:08:39,950 --> 00:08:45,920
seguito ovviamente non solo mostreremo il testo ma mostreremo anche uno snippet di mappa.

87
00:08:45,920 --> 00:08:48,260
Ora è possibile configurare l'indicatore di attività, possiamo

88
00:08:48,260 --> 00:08:55,440
impostare la dimensione su grande e il colore su Colori. primario se vuoi. Con tutto ciò, torniamo indietro e

89
00:08:55,440 --> 00:08:57,940
provalo qui su iOS perché mentre non

90
00:08:57,960 --> 00:09:03,060
posso aggiungere un'immagine qui, almeno posso controllare la posizione e fare clic su Ottieni

91
00:09:03,060 --> 00:09:07,980
posizione utente e ora mi viene chiesto se voglio concedere permessi che voglio consentire,

92
00:09:08,040 --> 00:09:14,820
consenti sempre e vedi quel filatore, è super veloce perché è un simulatore, inoltre simula la posizione, non è

93
00:09:14,820 --> 00:09:19,270
la vera posizione del tuo computer su cui stai eseguendo questo, invece

94
00:09:19,480 --> 00:09:25,750
è una posizione fittizia predefinita a San Francisco e qui su Android, è la stessa, se faccio clic

95
00:09:25,780 --> 00:09:33,100
su Ottieni posizione utente qui, devo concedere le autorizzazioni e una volta che l'ho fatto, vedi lo spinner qui e poi

96
00:09:33,100 --> 00:09:39,700
non vedi altro che nei registri ovviamente vedi qualcosa. Lì vedi gli oggetti che venivano registrati

97
00:09:39,700 --> 00:09:45,670
dove hai un oggetto secondario coords, per così dire un campo chiamato coords e l'oggetto

98
00:09:45,670 --> 00:09:53,230
che è un altro oggetto con la precisione e quindi una coppia di longitudine di latitudine che descrive questa

99
00:09:53,290 --> 00:10:00,170
posizione falsa, entrambi i simulatori usano falso posizioni. Hai anche un timestamp.

100
00:10:00,210 --> 00:10:01,700
Quindi ora sappiamo

101
00:10:01,740 --> 00:10:08,790
cosa c'è dentro, quindi possiamo impostare la posizione scelta, ora possiamo impostare questo per dire un oggetto in cui

102
00:10:09,540 --> 00:10:17,330
si memorizza una latitudine di posizione. coordinate. latitudine, ecco cosa c'è dentro, giusto e una longitudine,. lng della

103
00:10:17,330 --> 00:10:20,280
posizione. coordinate. longitudine.

104
00:10:20,320 --> 00:10:26,140
Quindi ora abbiamo quella posizione selezionata disponibile e quella posizione selezionata ora può essere usata per esempio

105
00:10:26,440 --> 00:10:28,440
per mostrare un piccolo frammento

106
00:10:28,480 --> 00:10:34,420
di mappa qui una volta che abbiamo una posizione. Prima di fare solo una piccola cosa, voglio assicurarmi

107
00:10:34,720 --> 00:10:41,920
che sia il testo che il filatore qui siano centrati, quindi sull'anteprima della mappa, in realtà imposterò anche il contenuto giustificato al

108
00:10:42,280 --> 00:10:48,490
centro e allineamo gli elementi al centro, in modo che tutti il contenuto è centrato orizzontalmente e verticalmente, è

109
00:10:48,500 --> 00:10:50,310
solo una piccola cosa,

110
00:10:50,320 --> 00:10:52,290
quindi ora vedi tutto al centro.

111
00:10:52,300 --> 00:10:58,390
Ma con ciò, ora assicuriamoci di mostrare un piccolo frammento di mappa che mostra la posizione scelta dall'utente.