Ora ho disabilitato il collegamento qui in modo da non avere tutti questi avvisi ed errori relativi allo stile del codice.
Ovviamente puoi adattare il tuo codice per seguire quello stile, questa
è una preferenza personale alla fine.
Ora quello che voglio fare qui è che voglio mostrarti come puoi ovviamente cambiare il codice ma
poi anche come potremmo aggiungere una funzionalità nativa in un'app nativa React nativa.
Quindi, per prima cosa, semplificherò molto questa app iniziale,
mi sbarazzerò di tutto quel contenuto qui e aggiungerò solo uno stile di base impostato qui con uno flessibile, giustificherò il
centro contenuti e allineamo il centro degli elementi su cui centrare il mio contenuto lo schermo.
Sbarazzati di questa cosa qui
e di tutte queste importazioni qui, voglio usare il foglio di stile, voglio usare la vista e voglio usare
il pulsante perché quello che voglio aggiungere è la funzionalità di selezione delle immagini.
Quindi qui restituisco la mia
vista e il mio pulsante e sul pulsante, dico prendere immagine e poi su OnPress,
voglio aprire il selettore di immagini.
Ora come possiamo aggiungere questo?
Ora, poiché si tratta di un progetto React Native senza expo in alcun modo, non possiamo usare facilmente le API expo qui.
In realtà c'è un modo di usarli e tornerò su questo più avanti in questo modulo,
ma dovresti configurare un paio di cose. Quindi, quindi, ciò che possiamo fare è che
possiamo fare qualcosa che farai molto se stai lavorando con un'app React Native
alla vaniglia, cerchiamo ad esempio il selettore di immagini React Native per trovare un pacchetto che ci
aiuti in questo, per ad esempio questo, il pacchetto di selezione
delle immagini di React Native e ora possiamo installarlo perché ora possiamo portare qualsiasi pacchetto di terze parti, non importa
se aggiunge funzionalità native o meno nella tua app. In precedenza con expo, questo non era davvero possibile, lì
si potevano portare solo pacchetti di terze parti che non utilizzavano le funzionalità del dispositivo
nativo, ora non si hanno restrizioni.
Quindi ora
possiamo aggiungere questo e qui possiamo installarlo seguendo le istruzioni di installazione qui,
quindi tornando al nostro progetto e lì eseguendo npm install --save e quindi qui è il selettore di immagini
React Native, come questo. A proposito, puoi mantenere questo processo qui
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.
Quindi aspettiamo che questa installazione finisca ora.
Ora è fatto,
ci
è voluto un po 'di tempo e ora dobbiamo
installare questo e la cosa buona è che questo pacchetto
è molto facile da installare, dovresti solo eseguire questo comando qui
- Link React Native, selettore di immagini React Native.
Quindi esegui questo nel
tuo progetto, in questo modo e dovresti essere bravo.
Ora dirò che ci sono pacchetti di terze parti che richiedono più sforzo,
dipende davvero dal pacchetto. Ad esempio, ovviamente è
stato molto semplice, hai appena eseguito l'installazione di expo, è stato molto veloce, non
hai impiegato molto tempo e non hai dovuto fare nient'altro.
Qui è necessario eseguire un comando
aggiuntivo, ma ovviamente non
è poi così male, ma ripeto, non tutti i pacchetti supportano questo
comando, alcuni pacchetti richiedono molto più lavoro di cablaggio manuale, lavoro manuale in cui è quindi necessario immergersi
nel Cartelle Android e iOS per iniziare a lavorare su alcuni file di configurazione lì.
Questo è ciò che ha fatto il comando React Native link per te, ad esempio su Android
se ti immergi nella cartella dell'app e lì, sorgente e quindi nella cartella sorgente in gradle build, vedrai che lì
è stata aggiunta questa riga.
Questo non era presente
dall'inizio, è stato aggiunto dal comando di collegamento React
Native e per alcuni pacchetti è necessario aggiungere queste voci manualmente,
molti pacchetti supportano il comando link e con versioni più recenti di React Native, alcuni pacchetti
anche supporta il collegamento automatico dove questo collegamento verrà eseguito automaticamente al termine dell'installazione, ma non tutti
i pacchetti dispongono di tale supporto, quindi è qualcosa di cui tenere conto.
Dietro le quinte è stata cambiata molta configurazione. Con ciò, ora possiamo usare questo
pacchetto, sempre come indicato nei loro documenti in modo da poter aggiungere questa importazione
qui, qui, quindi aggiungere anche la funzione pick image qui forse e collegarla al nostro pulsante e ora qui, il selettore di immagini funziona
un po ' diversamente da quello dell'expo.
Qui chiamiamo il selettore di immagini mostra il selettore di immagini con opzioni che
possiamo impostare, le opzioni sono configurate come descritto qui o descritto nei documenti in generale e qui prenderò solo questo
intero codice qui, in questo modo, lo copierò nell'immagine di prelievo funzione, sbarazzarsi di questa chiamata di stato impostata,
non siamo in un componente basato su
classi quindi non è qualcosa
che possiamo fare, invece qui nel blocco else accederò
semplicemente alla console l'URI di risposta che
dovrebbe essere il percorso dell'immagine che è stato preso e
poi abbiamo
un paio di gestori per diversi scenari qui e con quello, vediamo se funziona.
Se lo
salviamo, normalmente dovrebbe essere
ricostruito qui, ma a causa del nostro nuovo pacchetto installato, abbandonerò questo processo e eseguirò nuovamente run-android nativo
reattivo qui nel mio terminale integrato in Visual Studio Code e quindi, in
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
modo che possiamo sperare di vederlo lì e testare il selettore di immagini qui.
Quindi aspettiamo che finisca, che il processo di compilazione finisca.
Ora ecco l'app in arrivo e se la premo, ottengo questo overlay, posso fare clic su scatta foto e
non succede nulla.
Il motivo è che mancano le autorizzazioni e questo è il lavoro manuale che intendevo dire. Dobbiamo andare nella
cartella Android, lì nella fonte, principale, AndroidManifest che configura l'app Android e lì
devi aggiungere una nuova autorizzazione. Puoi copiare questa autorizzazione Internet di cui
avrai sempre bisogno per far sì che l'app Android comunichi al server di sviluppo e lì puoi ora
aggiungere l'autorizzazione della videocamera che devi aggiungere affinché questa app possa accedere alla videocamera del dispositivo, altrimenti questo non è supportato.
Quindi ora possiamo rieseguire questo processo, ricostruire l'applicazione e assicurarci di prendere in considerazione questa nuova impostazione e
con ciò, ora dovremmo essere in grado di aprirla.
Quindi, di nuovo, è un'impostazione aggiuntiva che non abbiamo dovuto fare ovviamente nel mondo dell'esposizione.
Ad ogni modo su iOS, devi anche fare qualcosa di simile mentre questo ricostruisce. Lì, se vai
nel tuo file RNWithoutExpo, trovi le informazioni. file plist e in quel file,
è inoltre necessario aggiungere una voce per richiedere questa autorizzazione.
Devi aggiungere una nuova chiave qui dopo una coppia chiave-valore esistente, la posizione esatta non ha importanza e
troverai le istruzioni dettagliate sui documenti ufficiali di quel pacchetto, lì sotto il
documento installato, se fai clic lì, tu troverai le istruzioni su quali autorizzazioni devono essere
impostate per Android,
ne ho anche dimenticata una, dobbiamo impostare anche questa autorizzazione di archiviazione esterna,
quindi fammi tornare ad AndroidManifest, aggiungilo qui e ora eseguilo nuovamente su Android e iOS ,
lì devi impostare questi tasti qui. Quindi copi tutto ciò
e poi torni alle informazioni. plist file Ti ho mostrato qui e ora puoi aggiungere queste coppie chiave-valore qui.
Detto
questo, controlliamo l'app su Android e se ora faccio
clic su scatta foto, ora mi viene richiesta l'autorizzazione qui, questo ora
accade automaticamente, il pacchetto lo fa per noi e
ora, la fotocamera si apre. Quindi ora funziona ma
come hai visto con un po 'di configurazione extra e seguendo le istruzioni sui documenti
ufficiali e ogni pacchetto avrà le sue istruzioni lì. Alcuni pacchetti non supportano nemmeno il comando
link,
lì devi fare ancora
di più, altri pacchetti richiedono meno lavoro. Hai più flessibilità ma quindi anche più compiti.
Questo è comunque il modo in cui puoi portare pacchetti di terze parti che sfruttano le funzionalità del dispositivo nativo in un'app
React Native solo per il tuo codice componente che scrivi, che è lo stesso
codice che condividiamo durante l'intero corso - stessi
componenti, stessa logica, stesso modo di come costruisci la tua app. Puoi creare le stesse cartelle, puoi aggiungere la
navigazione React, che non cambia tutto.