Ora questa applicazione React Native è stata creata con l'aiuto di Expo, come sapete. Ora, come ho accennato all'inizio del
corso, questa è ancora una normale applicazione React Native, quindi esporre solo come un
wrapper extra che offre molte funzionalità utili che rendono la costruzione di questa app più semplice
ed è come
una shell, un'app in cui viene eseguita la nostra app che rende quindi più semplice e soprattutto
più facile da attingere a molte funzionalità dei dispositivi nativi.
Ora, come ho già detto all'inizio di questo modulo, in un modulo separato ti mostrerò come
aggiungere funzionalità del dispositivo nativo alle app non expo
ma in realtà, se non hai un motivo per non utilizzare expo, vorrei ti consiglio vivamente
di usarlo perché expo se controlli i loro documenti, ha molte funzionalità integrate e molti moduli nativi incorporati che puoi usare, quindi
puoi aggiungere facilmente
funzionalità di dispositivi nativi e
visualizzare un elenco completo qui andando alla documentazione e lì al riferimento API.
Qui vedi un sacco di cose che puoi aggiungere alla tua app e queste sono per
lo più funzionalità del dispositivo nativo che sono tutte
fornite dall'Expo out of the box, quindi dovrai comunque installare qualcosa ma non dovrai
fare alcun manuale configurazione e come vedrai nella creazione di un'app senza modulo expo, potrebbe esserci qualche configurazione che
potresti dover fare se aggiungi moduli nativi, pacchetti di funzionalità del dispositivo nativo a un'app non expo,
quindi è davvero dolce Qui.
Ora voglio usare una fotocamera e in effetti c'è un pacchetto fotocamera che è possibile aggiungere.
Potremmo effettivamente utilizzarlo per accedere alla fotocamera del dispositivo,
questo è
perfetto se devi creare un'applicazione che deve davvero fare molto con la fotocamera, se stai
costruendo come Instagram, come un'applicazione in cui vuoi davvero controllare l'intero schermo della fotocamera e
l'intero flusso della fotocamera, in realtà non è quello che voglio fare qui.
Voglio usare la normale fotocamera del dispositivo,
non ho bisogno di qualcosa
di speciale lì, mi interessa solo ottenere un'immagine che l'utente possa scattare
e per questo effettivamente otteniamo il selettore di immagini. Questo ci consente anche di utilizzare la fotocamera del dispositivo, ma
non ci consente di personalizzare la fotocamera così tanto, ma
è esattamente quello che mi serve qui.
Ora tutto ciò che dobbiamo fare per accedervi è eseguire questo comando expo install, che a proposito è come npm install,
solo che si assicura che installi una versione del pacchetto che è garantito per funzionare con la
nostra versione specifica di expo che stiamo usando in questa app. Quindi copierò questo comando e poi in questo progetto,
potremo eseguire il selettore di immagini di expo install expo. Premi invio e questo ora installerà questo pacchetto con npm install
dietro le quinte, questo è quello che fa qui, solo in una
versione che si adatta al nostro SDK expo dove stiamo usando in questo progetto e questo ora lo
installerà e il gioco è fatto, non
è necessaria alcuna configurazione aggiuntiva.
Non abbiamo bisogno di toccare alcun file di
configurazione, non abbiamo bisogno di fare
nient'altro, questo ci assicura che possiamo usare questa funzionalità e che
ovviamente è molto semplice.
Con ciò possiamo iniziare ad usarlo e voglio iniziare ad usarlo qui nella nuova schermata del luogo in
cui abbiamo inserito il testo
giusto, lì voglio anche ora aggiungere un pulsante che l'utente può premere per aprire la telecamera.
Ora, ovviamente, per tutte queste funzionalità del dispositivo nativo e anche per le molte funzionalità che ovviamente non
possiamo comprendere in questo corso, hai sempre imparato come puoi usarle qui nei tuoi documenti ufficiali dell'esposizione,
lì hai imparato a quali metodi e proprietà puoi accedere lì, troverai alcuni brevi esempi per molti pacchetti, quindi
è sicuramente qualcosa che dovresti dare un'occhiata. Per la fotocamera, ovviamente, puoi anche
seguire perché lo useremo insieme qui per scattare una foto.
In realtà creerò un nuovo componente, ImageSelector. js, puoi chiamarlo come vuoi in cui
importare React da React e dove importare una vista e un pulsante e anche un testo da React Native e ovviamente anche il
foglio di stile perché voglio dare uno stile al selettore di immagini.
Diamo il nome al selettore di immagini, mi piace, il mio componente di selezione delle immagini.
Quindi, qui, il selettore di immagini è ovviamente un componente normale in cui voglio impostare
alcuni stili con il foglio di stile. creare metodo e dove alla fine esportare il componente di selezione delle immagini.
Cosa succederà qui nel componente di selezione delle immagini? Alla fine, qui restituirò una
vista che dovrebbe quindi contenere un'altra vista in cui posso visualizzare un'anteprima dell'immagine.
Quindi lì, voglio avere il componente di testo in cui dico che non è stata ancora scelta alcuna immagine, qual
è il mio contenuto di fallback se non
è stata ancora scelta un'immagine, altrimenti
visualizzerò un'immagine, quindi dovremo anche importare il componente immagine da Reagisci nativo e sotto quella vista, aggiungerò
un pulsante con un titolo di immagine di ripresa in cui voglio impostare il colore su Colori. primario, quindi per quello, assicurati
di importare quei colori costanti e su una stampa, voglio
aprire la fotocamera e mostrarla all'utente. Quindi aggiungerò anche una costante qui, prenderò il gestore di immagini e questa è una
funzione che dovrebbe aprire la
fotocamera e questa è la funzione che legherò a questo pulsante.
Ora un po 'di stile sarebbe bello. In quella vista esterna, aggiungerò uno stile di selezione delle immagini,
in questa vista interna che mostra
un'anteprima della mia immagine, aggiungerò uno stile di anteprima dell'immagine. Quindi questo testo qui potrebbe anche essere in stile, ma in realtà non ho
bisogno di uno stile speciale lì e, naturalmente, voglio anche produrre un'immagine qui e presto aggiungerò una condizione if / else per visualizzare
solo il testo o l'immagine
e questo dovrebbe anche avere uno stile forse solo di immagine.
Quindi ora abbiamo tre identificatori di stile che dobbiamo aggiungere al
foglio di stile, otteniamo il selettore di immagini
per il componente complessivo, otteniamo l'anteprima dell'immagine e quindi abbiamo l'immagine stessa.
L'immagine stessa è semplice, lì voglio solo impostare una larghezza del 100% e un'altezza del 100% in modo
che occupi tutta la larghezza e l'altezza del contenitore di anteprima circostante.
Ovviamente quel contenitore può ovviamente essere configurato comunque tu voglia configurarlo, gli
darò una larghezza del 100% e un'altezza di 200 pixel, ma ovviamente puoi
modificarlo o calcolarlo dinamicamente con l'API delle dimensioni. Aggiungi un margine in fondo a 10
e assicurati che il testo del mio segnaposto sia effettivamente centrato aggiungendo il centro contenuti giustificato e
allinea il centro degli elementi qui e oltre a
ciò, aggiungerò anche un bordo qui con il colore del bordo grigio chiaro e la larghezza del bordo di
uno.
Ora per il componente di selezione delle immagini in generale, lo imposterò per allineare il centro degli elementi
per assicurarmi che tutti gli elementi siano centrati in orizzontale ma
ora siamo tutti qui per aprire davvero la fotocamera del dispositivo, giusto?
Quindi prima di fare qualsiasi altra cosa qui riguardo l'anteprima e così
via, assicuriamoci che qui nel gestore delle immagini take, apriamo effettivamente la fotocamera e, per questo, importiamo tutto come selettore di immagini dal selettore di immagini
expo, quindi da questo pacchetto appena installato. Ora da quando ho usato il selettore di immagini
qui e anche per il componente, avremo uno scontro di nomi, quindi chiamerò questo selettore
di img qui solo per evitare questo scontro di nomi che altrimenti causerebbe problemi,
anche cambiarlo qui nell'esportazione di corso.
Quindi ora con il selettore di immagini importato qui, possiamo usarlo qui,
il selettore di
immagini e lì possiamo chiamare il lancio della videocamera asincrono.
Puoi anche aprire la galleria,
se vuoi, ma qui chiamerò launch camera async.
Ora questo aprirà la fotocamera del dispositivo e la parte asincrona qui implica che si tratta di
un'operazione asincrona.
In effetti questo restituisce una promessa, che ha senso perché apre la fotocamera e non sappiamo
quando l'utente avrà finito di scattare
l'immagine, quindi registrerà semplicemente una funzione che dovrebbe eseguire una volta che l'utente ha finito e risolto la
promessa di eseguire quella funzione una volta che ciò accade, una volta che l'utente ha
terminato o anche ovviamente una volta che l'utente annulla. Siamo in grado di gestire tutto ciò e il risultato e così
via in seguito, per ora vediamo se funziona e per questo, includiamo il componente di selezione delle immagini nella nuova schermata del luogo.
Quindi lì, possiamo importare il selettore di immagini e qui ovviamente possiamo usare quel nome
perché non stiamo usando il pacchetto di selezione delle immagini qui, importarlo dai componenti, dal componente di selezione delle immagini
e aggiungere questo selettore di immagini qui sotto il nostro input di testo come componente autochiudente come questo.
Ora se lo salviamo, diamo un'occhiata. Qui, quel testo e
così via, non è posizionato correttamente, non dobbiamo preoccuparci di questo in questo
momento, invece premiamo prendi immagine e quello che vedrai è che non succede nulla ma poi ricevo un avviso:
fotocamera mancante o permesso di rullino fotografico. Su Android, se lo provo, mi viene chiesto se desidero concedere le autorizzazioni. Devo premere Consenti qui e con
ciò, la fotocamera si apre. Quindi va bene, generalmente funziona, posso usarlo,
posso premere
questo pulsante quindi e quindi confermare l'immagine che ho scattato
ma su iOS non funziona e perché è così? Bene su iOS, qui abbiamo un errore di autorizzazione giusto
e
ciò accade semplicemente perché le autorizzazioni sono importanti ma funzionano diversamente su iOS e Android.
Su
Android imposterai anche le autorizzazioni in anticipo e poiché stiamo utilizzando questa applicazione expo in cui expo fornisce questo
wrapper, expo esegue effettivamente tutte queste autorizzazioni configurate e richieste per noi. Per iOS, il sistema di autorizzazione funziona in
modo leggermente diverso.
Non lo configuri in modo tale da avere un file di configurazione in cui definisci tutte le autorizzazioni in anticipo
e
il gioco è fatto, invece devi chiedere l'autorizzazione in fase di esecuzione.
Nota a margine in alcune versioni di Android, anche ora dovresti farlo.
C'è ancora un'esposizione come vedi che fa per te, quindi per Android, funziona in quel modo, su
iOS no, devi chiedere all'utente un'autorizzazione per accedere alla videocamera ed è semplicemente qualcosa che dobbiamo fare
qui e possiamo farlo con l'aiuto di un altro pacchetto
expo e questo è il pacchetto permessi.
È inoltre necessario installarlo con questo comando qui nel progetto in modo da poter chiedere
le autorizzazioni all'utente.
Quindi facciamolo qui nel progetto,
eseguiamo le autorizzazioni expo install expo che è ancora questo wrapper intorno a npm install per installare le autorizzazioni per
questo progetto o per installare questo pacchetto per questo progetto e quindi nel selettore immagini prima di provare
ad avviare il e aprendo la fotocamera, dovremo chiedere le autorizzazioni. Per questo aggiungerò effettivamente una nuova
costante qui, otterrò o verificherò le autorizzazioni e questa è una funzione che contiene
una funzione che utilizzerà questo pacchetto di autorizzazioni appena aggiunto.
Quindi qui importa tutto come permessi dalle autorizzazioni expo, quindi lo stesso tipo
di importazione che abbiamo per il selettore di
immagini e poi lì, possiamo usare i permessi e chiedere in modo asincrono.
Ancora una volta, si tratta di un'attività asincrona che restituisce una promessa perché ciò aprirà un prompt e prima
che l'utente abbia scelto una risposta, non
accadrà nulla, quindi abbiamo una promessa che si risolve o viene rifiutata una volta che l'utente ha confermato o rifiutato.
Quindi qui dobbiamo quindi essere più specifici su quali autorizzazioni
abbiamo bisogno, quindi passiamo qualcosa da chiedere asincrono e questa è una costante che otteniamo dall'oggetto autorizzazioni che stiamo importando qui.
Quindi, con la notazione a punti qui, possiamo accedere a diversi tipi di autorizzazioni e qui tutti questi
nomi in maiuscolo sono i diversi permessi che
puoi chiedere e qui abbiamo bisogno dell'autorizzazione della fotocamera perché vogliamo accedere alla fotocamera.
Se volessi accedere alla galleria, questa sarebbe l'autorizzazione per il rullino fotografico.
Ora vado per la fotocamera qui
e come ho detto, questo restituisce una promessa, voglio usare
async wait qui quindi quindi posso aggiungere async qui davanti alla funzione e quindi attendere questo e
ottenere il
risultato e archiviarlo in una costante , l'alternativa a quella sarebbe usare allora e
prendere questo e lì ora possiamo verificare se il risultato. lo stato non è uguale a concesso, il che significa che l'utente
ha rifiutato, l'utente non ha concesso
le autorizzazioni, in tal caso non possiamo continuare.
Quindi qui in realtà lancerò un avviso, quindi importare un
avviso da React Native e lanciare un avviso in cui dico avviso. avviso, autorizzazioni insufficienti, è necessario concedere le autorizzazioni per l'app della fotocamera per utilizzare questa app o qualsiasi output
che si desidera mostrare e
quindi aggiungerò un pulsante qui dove dico OK. Ora l'utente dovrà modificare le autorizzazioni nelle impostazioni di
sistema dopo averle rifiutate comunque, quindi non possiamo chiedere nuovamente le autorizzazioni qui una volta
che sono state rifiutate.
Quindi qui, voglio restituire false perché è la funzione di verifica delle autorizzazioni e voglio restituire
false se l'utente non ci ha concesso autorizzazioni, restituisco true
altrimenti perché ora sappiamo di avere autorizzazioni
A proposito, se chiamiamo questo funzioni più volte e l'utente ha già
concesso autorizzazioni in passato, l'utente non verrà nuovamente presentato con questo prompt, lo
stesso se l'utente ha rifiutato, in entrambi i casi il risultato viene archiviato automaticamente da iOS e questa funzione restituisce
vero o falso a seconda che l'utente abbia negato o concesso l'accesso in passato.
Quindi verificare le autorizzazioni ora è semplicemente una funzione che dobbiamo chiamare nel gestore
delle immagini take prima di provare a utilizzare la fotocamera.
Quindi qui, voglio anche usare async wait perché la verifica delle autorizzazioni ovviamente è una funzione
che restituisce
una promessa, quindi aspetterò questo e memorizzerò il risultato che memorizzerò in una costante denominata ha l'autorizzazione perché questa è
vera o falsa a seconda che l'utente abbia concesso o meno le autorizzazioni.
Ora se questo è falso, quindi se non è vero, tornerò qui, non
continuerò, non aprirò la fotocamera perché non mi sarà permesso farlo comunque, quindi non possiamo continua, questa
è
la cosa.
Altrimenti possiamo continuare e ora dovremmo essere in grado di lanciare anche una fotocamera su iOS.
Quindi
proviamo, salviamolo e
ora con quello cambiato, disinstallerò effettivamente expo qui per assicurarmi che per quanto riguarda le
autorizzazioni che ho concesso lì, sia tornato allo stato iniziale.
Probabilmente non è necessario farlo se non hai mai concesso autorizzazioni nella
tua app expo ma se in precedenza hai giocato con autorizzazioni e pacchetti nativi, dovresti disinstallare e
quindi reinstallare l'app expo eseguendo di nuovo l'app su iOS premendo i nella console laggiù
per assicurarsi che tutte queste autorizzazioni siano ripristinate.
Quindi ora se andiamo alla nuova schermata di riproduzione e facciamo clic su scatta immagine, mi
viene chiesto se voglio concedere l'accesso alla videocamera e qui posso fare clic su OK e ora otteniamo ancora quell'errore.
Ora l'unica ragione per questo è che anche se stiamo provando ad accedere alla videocamera qui, questo in realtà
ed è solo qualcosa che conosco per questo pacchetto richiede autorizzazioni per il rullino fotografico completo.
Quindi cambiamo questo per chiedere le autorizzazioni al rullino fotografico qui
e con quello, torna indietro e fai clic su scatta
immagine, ora sto chiedendo se voglio consentire l'accesso alle foto e ora se faccio clic su Sì, la fotocamera non è
disponibile su il simulatore che ora è un errore diverso ed è abbastanza chiaro riguardo al problema,
il simulatore iOS semplicemente non ha una videocamera. Quindi continuerò su Android da
ora in poi, ma ovviamente puoi provarlo su un
vero iPhone per vedere che lì funziona anche. Se esegui la scansione del tuo codice a barre expo con
l'app expo ed esegui l'app
lì come l'hai vista all'inizio del corso, puoi scattare immagini con un telefono reale e mostrerò anche l'app finita alla
fine di questo modulo su dispositivi iOS e Android, su dispositivi reali.
Quindi, per il momento, mi concentrerò su Android e lì, ovviamente, siamo già stati in grado di aprirlo.
Mi viene nuovamente chiesto qui, ma ora posso aprirlo e scattare un'immagine. Ovviamente è bello, ma prendere l'immagine in questo modo non è tutto ciò che
voglio fare, voglio anche essere in grado
di configurare il modo in cui lo prendo e voglio essere in grado di usarlo.