Ora oltre a configurare un nuovo progetto da zero con React Native CLI o con l'Expo CLI e quindi
a scegliere il flusso di
lavoro nudo, puoi persino convertire un progetto gestito in un progetto di flusso di lavoro nudo React Native ed è piuttosto bello perché ciò significa
che puoi ottenere tutto le funzionalità utili del flusso di lavoro gestito durante
lo sviluppo e, una volta terminato, ad esempio o una volta che è necessario un determinato pacchetto di terze parti che integra
alcune funzionalità che non sono state integrate in expo e assolutamente necessarie, in tal caso è possibile
ancora passare e non è necessario ricostruire l'app da zero e creare un nuovo progetto
e copiare il codice.
Come? Bene nel tuo progetto e questa è la funzionalità
del dispositivo nativo, i grandi posti proiettano in precedenza nel corso in cui possiamo aggiungere luoghi, dove ovviamente stiamo
usando la posizione, le mappe, la fotocamera, SQLite, dove stiamo usando tutti questi cose, lì in questo progetto, puoi semplicemente eseguire espulsione expo e
questo trasforma il tuo progetto in un progetto di flusso di lavoro gestito non expo.
Importante, non è possibile tornare indietro, ovviamente puoi copiare
la tua cartella ed effettuare una copia di backup e salvarla o se stai usando git, puoi ovviamente
tornare a un commit precedente ma se non hai salvato il tuo progetto, una volta espulso, non
è possibile riconvertirlo,
quindi essere consapevoli di questo.
Dovresti creare un nuovissimo progetto gestito expo e copiarlo su tutto il tuo codice se
vuoi tornare indietro.
Quindi qui se esegui espulsione expo, dovresti effettivamente chiederti quale tipo di progetto vuoi espellere e
qui ho due opzioni alla fine. Ora le opzioni che vedi qui potrebbero differire nel tempo
ma qui, le due opzioni che ho sono nude e kit expo. Il kit Expo è deprecato, questo è fondamentalmente
quello che avevamo prima di avere il flusso di lavoro nudo, quindi non dovresti davvero passare a questo, invece
puoi passare a nudo qui, il che significa semplicemente che
ora questo verrà trasformato in un progetto React Native, come se fosse creato con l'interfaccia della riga di
comando di React Native senza il wrapper expo ma verrà preconfigurato come
indicato qui nella pagina di reazione-nativo-unimoduli che è una specie di questo pacchetto che expo deve
esporre tutte queste API expo a un app non expo. Quindi preconfigurerà tutte queste cose durante ogni azione in
modo da non doverlo fare, quindi
otterrai un'app React Native plus per così dire. Quindi, se premo invio qui e ora è
importante, non puoi tornare indietro una volta completato, puoi scegliere un nome per la schermata principale
e sceglierò posti fantastici qui, ad esempio, premi invio, ora nome Android Studio e Xcode guida i progetti ma
dipende da te e ora questo farà il suo lavoro.
Trasforma il progetto, aggiunge una
cartella Android e poiché sono su macOS, aggiunge anche una cartella iOS. Ovviamente su Windows e Linux, non lo farà
perché lì, poiché ora è necessario crearlo localmente, non è in grado
di creare app
iOS e preconfigura tutto e installa un paio di dipendenze in modo da poter utilizzare il codice
esistente e tutti i pacchetti expo che hai già installato in questa configurazione non elaborata,
quindi non configura tutte le cose unimodules
qui, ma si assicura anche che tutti i pacchetti che stai già utilizzando, come la posizione expo o exite
SQLite, che anche questi pacchetti opera. Quindi ora può volerci un
po ', quindi aspettiamo che finisca e qui è fatto e vedi che in realtà mi dice che generalmente ha fatto il
suo lavoro ma c'erano due pacchetti che richiedono una configurazione manuale.
Puoi semplicemente fare clic su questi collegamenti per ottenere istruzioni su cosa devi fare lì,
è il selettore di immagini expo e il pacchetto di mappe native di React in cui è necessario eseguire l'installazione
manuale per completarlo.
Quindi qui nella pagina di
selezione delle immagini di expo, alla fine quello che dobbiamo fare è eseguire l'installazione delle porte nella cartella iOS,
quindi dobbiamo fare tutto dopo aver installato il pacchetto. Quindi nella cartella del progetto, navigherò su iOS ed
eseguirò l'installazione della porta, la porta è come npm per iOS, installa alcune dipendenze che iOS deve funzionare
correttamente, quindi è quello che sta succedendo ora e una volta fatto, faremo anche è necessario aggiungere questa voce qui
al manifest di Android, quindi è anche qualcosa che dovremo fare.
Quindi dobbiamo andare nella cartella Android, nella cartella dell'app lì e nella cartella di origine,
AndroidManifest e quindi, come descritto qui, aggiungere questo all'interno dei tag dell'applicazione.
Quindi qui è l'applicazione e lì, dovremmo aggiungere questa voce di attività qui, come questa, che è richiesta.
Ora, mentre sono già qui, vedrai anche che questo file manifest è stato impostato
in
un certo modo, include tutte le autorizzazioni e, naturalmente, non vuoi farlo, vuoi solo chiedere le
autorizzazioni hai davvero bisogno.
Quindi, come dice qui, rimuovi tutte le autorizzazioni di cui la tua app non ha bisogno e, ad
esempio, la mia applicazione demo qui dovrebbe solo avere bisogno dell'autorizzazione per trovare
la posizione che sposterò lassù e, naturalmente, l'autorizzazione della telecamera che sposterò lassù e anche l'autorizzazione di scrittura su memoria esterna, che
dovrebbe essere richiesta.
Dovrebbero essere effettivamente tutte le autorizzazioni e puoi controllare tutti i pacchetti di terze parti o tutti
i pacchetti API di expo che stai utilizzando per assicurarti di non perdere alcuna autorizzazione.
Con ciò, in realtà commenterò tutte queste autorizzazioni qui e anche tutte queste autorizzazioni e
lo testeremo per vedere se funziona. Quindi, con ciò, l'impostazione del pacchetto di selezione delle immagini è fatta. Ora anche le mappe native
di React devono essere configurate e lì possiamo immergerci nelle istruzioni di installazione.
Ora questo comando di installazione npm, che è già successo, ma ora ciò
che dobbiamo fare è eseguire React Native link React Native maps. Quindi saliamo semplicemente di un livello
nella cartella principale del progetto ed eseguiamo React Native link React Native maps e
che ora collegherà
tutto, assicuriamoci che tutto funzioni correttamente, che tutto sia configurato correttamente e
sarà comunque necessario fare qualche manuale roba, tutte queste cose qui non dovrebbero essere richieste,
ciò dovrebbe essere fatto con il collegamento per fortuna ma su Android, è necessario assicurarsi di aggiungere questa voce qui,
questa voce di metadati nella chiave dell'applicazione in AndroidManifest.
Quindi qui all'interno dell'applicazione, possiamo aggiungere questa voce e lì è necessario posizionare la chiave API di
Google Maps.
Ora ce l'ho nella cartella
env se ricordi, quindi prenderò questa chiave e la aggiungerò qui, sostituirò la tua chiave API di Google
Maps qui con essa e anche
importante, se vai alla pagina API di Google Maps, devi per abilitare questo SDK di mappe per Android per il
tuo
progetto, è importante altrimenti non funzionerà. Per iOS, non devi fare nulla di speciale a
meno che tu non voglia utilizzare Google Maps lì, nel qual caso devi seguire le istruzioni fornite nelle istruzioni di React
Native Maps qui per come utilizzare Google Maps su iOS ma per
Android tu sicuramente è necessario abilitare l'SDK di Google Maps per l'API Android qui. Per abilitare questa API, puoi accedere a Google Cloud Platform
qui per il progetto a cui hai lavorato in precedenza quando hai impostato quella chiave API e
così via e quindi qui in API e servizi, puoi andare alla libreria che ti porta in una
libreria di tutte le API di Google e lì l'SDK delle mappe per
Android, devi abilitarlo.
Dovrai anche impostare l'SDK delle mappe per iOS se desideri utilizzare Google Maps su iOS che
non userò qui.
Ora dovrebbe essere già abilitato qui,
ma assicurati che lo sia. Quindi, nel caso in cui non
fosse abilitato, fallo sicuramente.
Con ciò, questo dovrebbe anche essere impostato in
modo che funzioni e ora se eseguiamo run-android di reazione nativo, l'app che abbiamo creato in un modulo precedente con il flusso di
lavoro gestito expo ora dovrebbe ancora funzionare, ora senza il flusso di lavoro gestito expo senza il client expo utilizzato sul
simulatore o sul dispositivo reale, ma invece compilare localmente con Android Studio o ovviamente anche con iOS se si desidera
utilizzarlo e quindi allo stesso modo in cui lo si farebbe in un progetto creato con CLI React Native ma
ora dopo essere stato
espulso dal flusso di lavoro gestito, questo ovviamente significa che tutto questo codice è stato scritto nel
flusso di lavoro gestito, eppure ora lo eseguo nel flusso di lavoro non gestito, il che è piuttosto semplice.
Quindi aspettiamo che questo finisca e vediamo se questa app funziona come dovrebbe.
Sta arrivando sull'emulatore Android qui che è l'emulatore che voglio usare per i test perché lì posso usare
la telecamera dell'emulatore per i test e di nuovo, solo per sottolineare questo, questo non sta usando l'app client expo, non
potremmo nemmeno ' t
esegui la scansione di un codice a barre qui perché non esiste un codice a
barre per eseguire la scansione, ora questa è davvero un'app costruita con Android Studio e inviata alla nostra app.
Quindi ecco la nostra app e ora proviamo ad aggiungere
un nuovo posto qui, testare, scattare un'immagine, consentire l'accesso alla telecamera ovviamente e quindi prendere
questa immagine sì
ritagliarla, scegliere una
posizione sulla mappa forse, ecco
la mappa in arrivo, questa posizione mi sembra
buona, salva questo, salva il posto, eccoci
qui
e ora fammi chiudere questa app.
Lì, vedi anche che questa è davvero un'app
standalone installata, se apro il cassetto delle app qui sul dispositivo, qui sul simulatore, è
questa fantastica app che vedi qui.
Quindi, se lancio questo, ora riavvia l'app in cui abbiamo appena lavorato e c'è il nostro posto in quanto
è stato archiviato
nella memoria locale, l'immagine ovviamente è stata memorizzata nel filesystem altrimenti
non la vedremmo e funziona come prima ma ora non all'interno del client expo ma come app standalone
senza
alcun wrapper expo, utilizzando ancora alcune delle API expo e pacchetti expo con l'aiuto di questo pacchetto
unimodules che viene aggiunto e configurato automaticamente al flusso di lavoro nudo che abbiamo invece
ottenuto con l'aiuto dell'espulsione.
Quindi stanno succedendo un sacco di cose interessanti.