Quindi quali sono le nostre alternative al flusso di lavoro gestito?
Un'alternativa è utilizzare l'interfaccia della riga di comando di React
Native, puoi saperne di più sulla pagina ufficiale
di React Native se la visiti, puoi semplicemente cercare su Google React Native per trovarla e
lì se fai clic su per iniziare, in realtà sei accolto con due modi diversi di iniziare e i modi preselezionati per
utilizzare l'Expo CLI,
è l'approccio che abbiamo usato, giusto?
Quindi non c'è niente di troppo fantastico in questo, questo ti dà un'app React Native usando expo, è quello che
abbiamo usato in questo corso.
Puoi anche fare clic tuttavia sull'avvio rapido di
React Native CLI e ora qui devi innanzitutto impostare il tuo sistema in un certo
modo e quindi puoi installare un pacchetto separato, React Native CLI di cui ora hai bisogno
per creare un progetto e per eseguirlo e così via. Ora importante, qui troverai le istruzioni di installazione dettagliate per i diversi sistemi
operativi e app che desideri creare.
Ora tieni presente che su Windows come dice qui, non puoi creare app iOS, lo stesso su Linux, puoi
solo creare app Android lì e troverai le istruzioni di installazione se selezioni le opzioni specifiche.
Su macOS puoi
creare iOS e Android e dovrai anche seguire queste istruzioni di installazione.
Ora non lo farò in dettaglio qui perché li troverai tutti scritti qui ovviamente se vuoi
seguire, alla fine
dovrai installare un paio di pacchetti, non pacchetti npm ma pacchetti a livello di sistema e il il processo
esatto di installazione differisce per quanto riguarda la piattaforma su cui si sta eseguendo.
Dovrai installare Android Studio o Xcode, quindi Xcode per app iOS, app Android Studio per Android e devi
installarlo ora, in precedenza era facoltativo, l'ho
appena fatto per
ottenere un simulatore, ora ne hai bisogno
perché ora questi gli strumenti verranno utilizzati per creare la tua app.
In precedenza ciò non era necessario perché il wrapper expo in sostanza leggeva il nostro codice e lo
ospitava e puoi anche creare un'app standalone con expo nel flusso di
lavoro gestito, che accadrà nel cloud.
Ora che tutto accade localmente, dovrai installare Android Studio e così via e installarlo
con tutte le opzioni che trovi qui.
Ora anche tu non importa per quale piattaforma stai lavorando, devi anche installare la CLI React Native, puoi farlo
nel tuo normale prompt dei comandi o terminale, su Mac o Linux potresti dover aggiungere sudo davanti a questo per ottenere le autorizzazioni giuste
e questo ora installerà globalmente la CLI React Native, per questo è necessario anche installare
NodeJS perché utilizza npm che è il gestore dei pacchetti del nodo, quindi assicurati
di avere anche quello.
Ora con la CLI nativa di React
installata, possiamo iniziare a creare un progetto totalmente senza expo e per questo creerò un progetto nuovo
di zecca e ho selezionato una cartella per quello eseguendo
init nativo di reazione e ora qualsiasi nome di tua
scelta, per esempio RNWithoutExpo. Per il nome, è importante che sia
scritto in questo modo, senza trattini o caratteri di sottolineatura ma solo una parola.
Quindi RNWithoutExpo è il nome che sceglierò e questo creerà ora un nuovissimo progetto React Native
usando la CLI React Native in questo posto dove hai eseguito questo comando e ti darà questa nuova cartella
che contiene questo nuovo progetto React Native.
Ora di nuovo
importante, ora devi avere Android Studio e Xcode installati e configurati come menzionato nei documenti ufficiali qui, altrimenti ciò
che sto
per mostrare che ora non funzionerà, è necessario
che sia installato perché ora questi strumenti saranno sfruttati da l'interfaccia della riga di comando nativa
di React per creare ed eseguire la tua app. Anche far girare alcuni emulatori o simulatori, possono essere gli stessi usati
prima nel corso ma devi averli in esecuzione in modo che possiamo vedere la nostra app React Native in esecuzione lì.
Quindi ora aspettiamo che questa configurazione finisca qui e una volta fatto questo e questo processo può richiedere del tempo, puoi
seguire le istruzioni qui alla fine per eseguire la tua app. Consentitemi quindi di navigare in questa cartella appena creata
qui
ed eseguire run-ios di reattivo nativo, ad
esempio, per eseguirlo sul simulatore iOS che ho ottenuto. Ora questo dietro le quinte usa Xcode per creare questa
app,
non usa più expo, puoi disinstallare qui il client expo, puoi disinstallare la CLI expo
dal tuo sistema,
questo non sfrutta affatto expo, usa solo Xcode dietro le scene per costruire la tua app,
quindi questo strumento di sviluppo nativo di Apple. Quindi aspettiamo che questa build finisca e la prima volta che la costruisci,
ci vorrà un po
'più di tempo, le ricostruzioni successive saranno più veloci. Quindi aspettiamo che questo finisca.
Ora, durante questo processo di compilazione, verrà aperta una nuova scheda o una nuova finestra
nel tuo terminale, manterrai quel processo in esecuzione e manterrai naturalmente il
processo
di compilazione, non uscire da questo, quindi mantieni entrambi questi processi attivi e funzionanti qui e ora questo installa l'app
sul simulatore, in questo caso, se avessi un dispositivo reale collegato, lo installerebbe lì e avvierà l'app lì
e quindi qui, in realtà ha
creato un nuovo simulatore qui per me, no importa
però, ora avvia l'app qui in questo simulatore. Anche in questo caso per il primo
lancio, questo ora scarica sostanzialmente l'app integrata su questo dispositivo e ci sono anche alcune belle funzionalità di sviluppo, il debug
remoto può essere abilitato, quindi hai anche tutte queste belle funzionalità qui, che non
è esclusivo dell'expo e questo primo lancio richiederà un po 'più di tempo come detto.
Quindi aspettiamo che questo download finisca qui in modo che l'app si avvii e qui sta arrivando. Ora la schermata iniziale esatta che stai vedendo
qui, che potrebbe differire
nel tempo perché è solo il codice iniziale che ottieni nel
progetto, che vedremo tra un secondo, ma questa è ora l'app, un'app nativa senza expo
altrimenti lo stesso, in esecuzione su iOS. Possiamo anche eseguirlo su Android e per questo, questo processo che ora è finito può
essere cancellato, l'altro dovrebbe essere mantenuto in
esecuzione, è il tuo server di sviluppo che parla al dispositivo e che controlla le modifiche ai file e invia il nuovo
codice al dispositivo
, quindi quello che sai dall'Expo, che funziona anche qui. Quindi mantieni l'altro processo in esecuzione
ma ora possiamo anche eseguire run-android reattivo nativo per creare anche l'app per Android e sfruttare lo stesso server
per poi anche costruire e spingere l'app Android nell'emulatore Android e poi vedere anche quello.
Quindi aspettiamo che finisca, ancora
una volta questa prima build richiederà più tempo, i ricarichi successivi saranno molto più veloci.
Questo processo di compilazione ora sfrutta Android Studio, che devi anche aver
installato e configurato come descritto nei documenti ufficiali e quindi questo ovviamente ora funziona anche
totalmente senza Expo, usa solo Android Studio.
Ora questo avvia anche l'app per Android qui sul mio emulatore Android, ma proprio come prima, questo avvio iniziale può richiedere un po
'di tempo, ora si sta
connettendo a questo server di sviluppo che quindi qui ovviamente dovresti
continuare a funzionare, non solo mentre costruisce questo bundle, ma per tutto il tempo in modo che fino
alle modifiche nei tuoi file, ottieni una ricostruzione dal vivo e una volta fatto, vediamo l'app finita in
esecuzione su Android.
Ora diamo un'occhiata al codice che ne è
responsabile, sembra ora totalmente diverso da quello che abbiamo visto finora?
Per questo, ho caricato di nuovo il progetto qui con Visual Studio Code, quindi la stessa configurazione di prima
e quello che vedi sembra un po 'diverso ma soprattutto, abbiamo un sacco di file di configurazione diversi, abbastanza onesti
ma che non cambia davvero il modo in cui scriviamo il nostro codice.
Molto importante, abbiamo una cartella Android e una iOS,
non ce l'avevamo
prima, quelle cartelle e su Windows tra l'altro, Linux non hai iOS, hai solo Android lì
ma quelle cartelle contengono la vera app nativa progetti che sono stati creati con l'aiuto di Android
Studio e Xcode e che il tuo codice si integra in un
modo che potresti dire, React Native fa tutto questo per te, il processo React Native CLI ma
se diamo un'occhiata al codice concreto nella app. file js, beh, è proprio
quello che abbiamo usato in questo corso, giusto? Lì abbiamo un paio di importazioni e alcuni collegamenti aggiuntivi che ti mostrano alcuni avvisi
qui riguardo allo stile del codice.
Questi non sono errori reali, solo che dovrei usare le virgolette doppie invece
delle virgolette singole, sì qualche consiglio non mi interessa qui, ma se dai un'occhiata a
ciò che viene importato qui, reagisci, salva la vista dell'area, il foglio di stile, la vista di
scorrimento , view, text - queste sono tutte cose con cui abbiamo già lavorato, quindi abbiamo
i componenti normali con cui abbiamo già lavorato e ovviamente lo facciamo perché ciò che ho detto durante questo corso, React Native è React Native, expo è un
involucro sottile .
Scriviamo lo stesso codice, utilizziamo gli stessi componenti, vengono compilati in widget nativi, tutto non cambia quando
utilizziamo expo, l'unica differenza è che
con expo non dobbiamo impostare tanto, la build è un po
'più veloce e l'aggiunta di moduli nativi è semplicissima, testare su dispositivi reali è semplicissimo, è semplicemente più
semplice, costruiamo l'app
allo stesso modo e questo è qualcosa che puoi vedere anche qui.
Gli stili sono impostati allo stesso modo con il foglio di stile. creare, è tutto proprio
come abbiamo fatto durante questo corso ed è importante
per te.
Ora un'altra cosa che troverai qui è l'indice. js file, non lo
avevamo in Expo, questo è il tipo di file di configurazione di base che avvia l'app che potresti
dire, che assicura che questo componente dell'app venga visualizzato sullo schermo, è qualcosa
che Expo ha fatto per te nel React App expo nativa ma a parte questo, è davvero la stessa
cosa e costruiresti un'app allo stesso modo.