1
00:00:02,500 --> 00:00:07,190
Ora ho disabilitato il collegamento qui in modo da non avere tutti questi avvisi ed errori relativi allo stile del codice.

2
00:00:07,190 --> 00:00:10,550
Ovviamente puoi adattare il tuo codice per seguire quello stile, questa

3
00:00:10,640 --> 00:00:12,820
è una preferenza personale alla fine.

4
00:00:12,830 --> 00:00:19,070
Ora quello che voglio fare qui è che voglio mostrarti come puoi ovviamente cambiare il codice ma

5
00:00:19,130 --> 00:00:24,390
poi anche come potremmo aggiungere una funzionalità nativa in un'app nativa React nativa.

6
00:00:24,610 --> 00:00:28,780
Quindi, per prima cosa, semplificherò molto questa app iniziale,

7
00:00:28,850 --> 00:00:37,250
mi sbarazzerò di tutto quel contenuto qui e aggiungerò solo uno stile di base impostato qui con uno flessibile, giustificherò il

8
00:00:37,400 --> 00:00:44,090
centro contenuti e allineamo il centro degli elementi su cui centrare il mio contenuto lo schermo.

9
00:00:44,090 --> 00:00:46,550
Sbarazzati di questa cosa qui

10
00:00:46,760 --> 00:00:54,150
e di tutte queste importazioni qui, voglio usare il foglio di stile, voglio usare la vista e voglio usare

11
00:00:54,290 --> 00:00:59,720
il pulsante perché quello che voglio aggiungere è la funzionalità di selezione delle immagini.

12
00:00:59,750 --> 00:01:01,660
Quindi qui restituisco la mia

13
00:01:02,750 --> 00:01:08,100
vista e il mio pulsante e sul pulsante, dico prendere immagine e poi su OnPress,

14
00:01:08,240 --> 00:01:10,460
voglio aprire il selettore di immagini.

15
00:01:10,460 --> 00:01:11,990
Ora come possiamo aggiungere questo?

16
00:01:12,230 --> 00:01:20,030
Ora, poiché si tratta di un progetto React Native senza expo in alcun modo, non possiamo usare facilmente le API expo qui.

17
00:01:20,040 --> 00:01:25,530
In realtà c'è un modo di usarli e tornerò su questo più avanti in questo modulo,

18
00:01:25,530 --> 00:01:30,690
ma dovresti configurare un paio di cose. Quindi, quindi, ciò che possiamo fare è che

19
00:01:30,690 --> 00:01:34,660
possiamo fare qualcosa che farai molto se stai lavorando con un'app React Native

20
00:01:34,730 --> 00:01:39,810
alla vaniglia, cerchiamo ad esempio il selettore di immagini React Native per trovare un pacchetto che ci

21
00:01:39,810 --> 00:01:43,060
aiuti in questo, per ad esempio questo, il pacchetto di selezione

22
00:01:43,320 --> 00:01:49,140
delle immagini di React Native e ora possiamo installarlo perché ora possiamo portare qualsiasi pacchetto di terze parti, non importa

23
00:01:49,320 --> 00:01:55,080
se aggiunge funzionalità native o meno nella tua app. In precedenza con expo, questo non era davvero possibile, lì

24
00:01:55,080 --> 00:01:59,520
si potevano portare solo pacchetti di terze parti che non utilizzavano le funzionalità del dispositivo

25
00:01:59,520 --> 00:02:01,380
nativo, ora non si hanno restrizioni.

26
00:02:01,470 --> 00:02:03,060
Quindi ora

27
00:02:03,360 --> 00:02:09,810
possiamo aggiungere questo e qui possiamo installarlo seguendo le istruzioni di installazione qui,

28
00:02:09,810 --> 00:02:18,690
quindi tornando al nostro progetto e lì eseguendo npm install --save e quindi qui è il selettore di immagini

29
00:02:21,970 --> 00:02:25,430
React Native, come questo. A proposito, puoi mantenere questo processo qui

30
00:02:25,450 --> 00:02:30,730
in esecuzione e dovresti fare in modo che le modifiche al codice una volta salvate i tuoi file vengano raccolte e trasferite sui tuoi dispositivi.

31
00:02:30,970 --> 00:02:34,310
Quindi aspettiamo che questa installazione finisca ora.

32
00:02:34,330 --> 00:02:35,090
Ora è fatto,

33
00:02:35,110 --> 00:02:35,860
ci

34
00:02:36,800 --> 00:02:39,240
è voluto un po 'di tempo e ora dobbiamo

35
00:02:39,240 --> 00:02:41,900
installare questo e la cosa buona è che questo pacchetto

36
00:02:41,910 --> 00:02:44,770
è molto facile da installare, dovresti solo eseguire questo comando qui

37
00:02:44,790 --> 00:02:47,250
- Link React Native, selettore di immagini React Native.

38
00:02:47,340 --> 00:02:49,270
Quindi esegui questo nel

39
00:02:50,400 --> 00:02:53,550
tuo progetto, in questo modo e dovresti essere bravo.

40
00:02:53,730 --> 00:02:57,870
Ora dirò che ci sono pacchetti di terze parti che richiedono più sforzo,

41
00:02:57,870 --> 00:03:00,960
dipende davvero dal pacchetto. Ad esempio, ovviamente è

42
00:03:00,960 --> 00:03:05,540
stato molto semplice, hai appena eseguito l'installazione di expo, è stato molto veloce, non

43
00:03:05,550 --> 00:03:08,720
hai impiegato molto tempo e non hai dovuto fare nient'altro.

44
00:03:08,880 --> 00:03:11,140
Qui è necessario eseguire un comando

45
00:03:11,270 --> 00:03:12,870
aggiuntivo, ma ovviamente non

46
00:03:12,870 --> 00:03:16,890
è poi così male, ma ripeto, non tutti i pacchetti supportano questo

47
00:03:16,920 --> 00:03:22,950
comando, alcuni pacchetti richiedono molto più lavoro di cablaggio manuale, lavoro manuale in cui è quindi necessario immergersi

48
00:03:22,950 --> 00:03:28,250
nel Cartelle Android e iOS per iniziare a lavorare su alcuni file di configurazione lì.

49
00:03:28,290 --> 00:03:33,600
Questo è ciò che ha fatto il comando React Native link per te, ad esempio su Android

50
00:03:33,600 --> 00:03:39,540
se ti immergi nella cartella dell'app e lì, sorgente e quindi nella cartella sorgente in gradle build, vedrai che lì

51
00:03:42,290 --> 00:03:43,970
è stata aggiunta questa riga.

52
00:03:44,000 --> 00:03:45,710
Questo non era presente

53
00:03:45,710 --> 00:03:48,610
dall'inizio, è stato aggiunto dal comando di collegamento React

54
00:03:48,830 --> 00:03:52,250
Native e per alcuni pacchetti è necessario aggiungere queste voci manualmente,

55
00:03:52,250 --> 00:03:57,080
molti pacchetti supportano il comando link e con versioni più recenti di React Native, alcuni pacchetti

56
00:03:57,080 --> 00:04:02,480
anche supporta il collegamento automatico dove questo collegamento verrà eseguito automaticamente al termine dell'installazione, ma non tutti

57
00:04:02,480 --> 00:04:06,550
i pacchetti dispongono di tale supporto, quindi è qualcosa di cui tenere conto.

58
00:04:06,550 --> 00:04:12,680
Dietro le quinte è stata cambiata molta configurazione. Con ciò, ora possiamo usare questo

59
00:04:13,100 --> 00:04:19,680
pacchetto, sempre come indicato nei loro documenti in modo da poter aggiungere questa importazione

60
00:04:20,000 --> 00:04:31,050
qui, qui, quindi aggiungere anche la funzione pick image qui forse e collegarla al nostro pulsante e ora qui, il selettore di immagini funziona

61
00:04:34,100 --> 00:04:37,360
un po ' diversamente da quello dell'expo.

62
00:04:37,370 --> 00:04:42,400
Qui chiamiamo il selettore di immagini mostra il selettore di immagini con opzioni che

63
00:04:42,410 --> 00:04:49,550
possiamo impostare, le opzioni sono configurate come descritto qui o descritto nei documenti in generale e qui prenderò solo questo

64
00:04:49,640 --> 00:04:56,120
intero codice qui, in questo modo, lo copierò nell'immagine di prelievo funzione, sbarazzarsi di questa chiamata di stato impostata,

65
00:04:56,140 --> 00:04:58,510
non siamo in un componente basato su

66
00:04:58,510 --> 00:05:00,450
classi quindi non è qualcosa

67
00:05:00,460 --> 00:05:03,820
che possiamo fare, invece qui nel blocco else accederò

68
00:05:04,000 --> 00:05:06,560
semplicemente alla console l'URI di risposta che

69
00:05:06,590 --> 00:05:09,960
dovrebbe essere il percorso dell'immagine che è stato preso e

70
00:05:10,150 --> 00:05:11,160
poi abbiamo

71
00:05:11,340 --> 00:05:16,330
un paio di gestori per diversi scenari qui e con quello, vediamo se funziona.

72
00:05:16,330 --> 00:05:17,440
Se lo

73
00:05:20,110 --> 00:05:21,550
salviamo, normalmente dovrebbe essere

74
00:05:21,550 --> 00:05:28,470
ricostruito qui, ma a causa del nostro nuovo pacchetto installato, abbandonerò questo processo e eseguirò nuovamente run-android nativo

75
00:05:28,490 --> 00:05:33,680
reattivo qui nel mio terminale integrato in Visual Studio Code e quindi, in

76
00:05:33,680 --> 00:05:42,270
questa cartella di progetto e ora questo richiamerà nuovamente questo server di sviluppo e, cosa ancora più importante, riavvierà anche l'app sull'emulatore in

77
00:05:42,270 --> 00:05:47,750
modo che possiamo sperare di vederlo lì e testare il selettore di immagini qui.

78
00:05:47,820 --> 00:05:51,060
Quindi aspettiamo che finisca, che il processo di compilazione finisca.

79
00:05:51,060 --> 00:05:58,260
Ora ecco l'app in arrivo e se la premo, ottengo questo overlay, posso fare clic su scatta foto e

80
00:05:58,260 --> 00:05:59,700
non succede nulla.

81
00:05:59,700 --> 00:06:04,290
Il motivo è che mancano le autorizzazioni e questo è il lavoro manuale che intendevo dire. Dobbiamo andare nella

82
00:06:04,290 --> 00:06:11,610
cartella Android, lì nella fonte, principale, AndroidManifest che configura l'app Android e lì

83
00:06:11,610 --> 00:06:16,770
devi aggiungere una nuova autorizzazione. Puoi copiare questa autorizzazione Internet di cui

84
00:06:16,770 --> 00:06:22,530
avrai sempre bisogno per far sì che l'app Android comunichi al server di sviluppo e lì puoi ora

85
00:06:22,530 --> 00:06:29,360
aggiungere l'autorizzazione della videocamera che devi aggiungere affinché questa app possa accedere alla videocamera del dispositivo, altrimenti questo non è supportato.

86
00:06:29,370 --> 00:06:35,820
Quindi ora possiamo rieseguire questo processo, ricostruire l'applicazione e assicurarci di prendere in considerazione questa nuova impostazione e

87
00:06:35,820 --> 00:06:39,090
con ciò, ora dovremmo essere in grado di aprirla.

88
00:06:39,120 --> 00:06:43,070
Quindi, di nuovo, è un'impostazione aggiuntiva che non abbiamo dovuto fare ovviamente nel mondo dell'esposizione.

89
00:06:44,400 --> 00:06:49,180
Ad ogni modo su iOS, devi anche fare qualcosa di simile mentre questo ricostruisce. Lì, se vai

90
00:06:49,200 --> 00:06:57,100
nel tuo file RNWithoutExpo, trovi le informazioni. file plist e in quel file,

91
00:06:57,490 --> 00:07:02,630
è inoltre necessario aggiungere una voce per richiedere questa autorizzazione.

92
00:07:07,760 --> 00:07:14,660
Devi aggiungere una nuova chiave qui dopo una coppia chiave-valore esistente, la posizione esatta non ha importanza e

93
00:07:14,670 --> 00:07:19,920
troverai le istruzioni dettagliate sui documenti ufficiali di quel pacchetto, lì sotto il

94
00:07:19,920 --> 00:07:25,710
documento installato, se fai clic lì, tu troverai le istruzioni su quali autorizzazioni devono essere

95
00:07:25,710 --> 00:07:27,100
impostate per Android,

96
00:07:27,150 --> 00:07:32,240
ne ho anche dimenticata una, dobbiamo impostare anche questa autorizzazione di archiviazione esterna,

97
00:07:32,250 --> 00:07:38,380
quindi fammi tornare ad AndroidManifest, aggiungilo qui e ora eseguilo nuovamente su Android e iOS ,

98
00:07:38,410 --> 00:07:43,970
lì devi impostare questi tasti qui. Quindi copi tutto ciò

99
00:07:47,020 --> 00:07:53,410
e poi torni alle informazioni. plist file Ti ho mostrato qui e ora puoi aggiungere queste coppie chiave-valore qui.

100
00:07:57,460 --> 00:07:58,210
Detto

101
00:07:58,750 --> 00:08:01,750
questo, controlliamo l'app su Android e se ora faccio

102
00:08:01,930 --> 00:08:05,860
clic su scatta foto, ora mi viene richiesta l'autorizzazione qui, questo ora

103
00:08:05,860 --> 00:08:08,730
accade automaticamente, il pacchetto lo fa per noi e

104
00:08:08,920 --> 00:08:12,120
ora, la fotocamera si apre. Quindi ora funziona ma

105
00:08:12,130 --> 00:08:17,350
come hai visto con un po 'di configurazione extra e seguendo le istruzioni sui documenti

106
00:08:17,350 --> 00:08:23,260
ufficiali e ogni pacchetto avrà le sue istruzioni lì. Alcuni pacchetti non supportano nemmeno il comando

107
00:08:23,260 --> 00:08:23,830
link,

108
00:08:23,860 --> 00:08:25,530
lì devi fare ancora

109
00:08:25,560 --> 00:08:31,380
di più, altri pacchetti richiedono meno lavoro. Hai più flessibilità ma quindi anche più compiti.

110
00:08:31,390 --> 00:08:37,240
Questo è comunque il modo in cui puoi portare pacchetti di terze parti che sfruttano le funzionalità del dispositivo nativo in un'app

111
00:08:37,240 --> 00:08:40,970
React Native solo per il tuo codice componente che scrivi, che è lo stesso

112
00:08:41,020 --> 00:08:43,630
codice che condividiamo durante l'intero corso - stessi

113
00:08:43,630 --> 00:08:49,660
componenti, stessa logica, stesso modo di come costruisci la tua app. Puoi creare le stesse cartelle, puoi aggiungere la

114
00:08:49,660 --> 00:08:52,540
navigazione React, che non cambia tutto.