Navigazione Navigazione in React Native

Un'opinione supposta sullo stato attuale della navigazione in React Native

Questo è un adattamento di un discorso che ho tenuto di recente a NashReact. Puoi visualizzare le diapositive nella loro interezza su SlideShare.

Sei nuovo di React Native. O forse stai per iniziare un grande progetto che utilizza React Native.

Sei obbligato a porre la domanda: "quale navigatore devo usare?".

E se vai su Google probabilmente troverai alcune opzioni ...

Erano solo i primi a cui potevo pensare, senza dubbio ce ne sono altri! Quindi, perché è così?

Due categorie di navigatori

Puoi suddividere tutte le soluzioni di navigazione per React Native in due categorie: JavaScript e Native.

I navigatori Javascript sono scritti interamente in JavaScript ed eseguiti interamente in JavaScript.

I navigatori nativi sono navigatori scritti nella lingua nativa della piattaforma (in genere Objective-C o Java) e sono esposti a React Native tramite un'API JavaScript. La differenza principale è che la navigazione viene eseguita al di fuori del thread JavaScript.

Ma perché così tante opzioni?

Domanda totalmente valida - sembra che due soluzioni darebbero, giusto? Non nella terra JavaScript! Lascia che ti dia una breve lezione (personale) di storia ...

Ho iniziato a utilizzare React Native a tempo pieno molto presto dopo che era di provenienza aperta (entro poche settimane). Quindi ho provato alcune soluzioni di navigazione nei prodotti su cui ho lavorato. Ti presenterò quelli che ho usato quotidianamente e su cui ho investito decine di ore:

NavigatorIOS

  • Nascita: viene rilasciato React Native
  • Pro: utilizzato l'attuale navigatore nativo iOS
  • Contro: solo iOS
  • Decesso: supporto Android aggiunto a React Native

Quando React Native è uscito per la prima volta non un sacco di persone lo utilizzavano, c'era una soluzione di navigazione e praticamente hai fatto le cose in un modo (perché era così nuovo). NavigatorIOS ha funzionato magnificamente in questo mondo, fino a quando non è arrivato Android.

Navigatore

  • Nascita: supporto Android aggiunto alla versione React Native / React Native
  • Pro: basato su JavaScript - completamente multipiattaforma
  • Contro: un po 'confuso, anche se multipiattaforma non è stato progettato per entrambe le piattaforme, potenziale per problemi di prestazioni
  • Decesso: acquisizione della comunità / Navigazione sperimentale

Quando abbiamo iniziato a lavorare sul supporto Android, siamo passati al componente Navigator. Sembrava la progressione più naturale ed era uno dei navigatori ufficiali. Non è stato perfetto però.

ExNavigation

  • Nascita: dolore dal componente Navigator
  • Pro: multipiattaforma, ottime impostazioni predefinite, facile da usare
  • Contro: limitato nella sua ampiezza di funzionalità, potenziale per problemi di prestazioni
  • Death: React Navigation

ExNavigation, fino ad oggi, ha la mia API preferita di qualsiasi navigatore. È stato facile da imparare e facile da usare nei miei tutorial e corsi. Ma, come tutto, non è stato perfetto. Il progetto a cui stavo lavorando aveva bisogno di soluzioni di navigazione più personalizzate (designer )

NavigationExperimental

  • Nascita: è necessario un navigatore migliore e più configurabile
  • Pro: altamente configurabile
  • Contro: confuso, sperimentale, potenziale per problemi di prestazioni
  • Death: React Navigation

NavigationExperimental è stato, come si può intuire dal nome, un esperimento per costruire una soluzione di navigazione più configurabile. È stato comunque confuso: l'ho usato per mesi e, onestamente, non credo di averlo mai capito.

Navigazione oggi

Potresti aver notato che le ultime due soluzioni di navigazione che ho usato sono morte a causa della stessa libreria di navigazione, quindi il campione indiscusso della navigazione in React Native è ...

Reagire alla navigazioneReagisci feedback sulla navigazione

La realtà è che tutte quelle soluzioni di navigazione che ti ho mostrato prima esistono ancora, e altro ancora. Ma penso di poterti aiutare a rendere più facile la tua decisione ...

I contendenti primari

Nell'angolo JavaScript abbiamo React Navigation e nell'angolo nativo abbiamo React Native Navigation.

“Perché non X? È molto meglio di quei pezzi di spazzatura! "Ogni cosa ha i suoi pro e contro. Questi sono quelli che vedo avere la massima flessibilità, massima adozione e supporto continuo.
Inoltre, ti ho detto che era supponente.

Quindi, tra questi due navigatori, quale dovresti scegliere?

Primo: considerazioni sull'ambiente

Prima di iniziare a valutare i pro e i contro di ognuna di queste soluzioni, devi scoprire se puoi effettivamente scegliere tra di esse.

Se stai usando Expo o Crea l'app React Native per creare l'app React Native, strumenti che rendono molto più semplice la creazione di app RN, entrerai nel campo di navigazione di React. Questo perché, nell'ambito di ciò che rende tali strumenti così facili da usare, non hai accesso alle parti native dell'app React Native, che richiede React Native Navigation.

Pertanto, se scegli di creare un'app con uno di questi strumenti (che è il modo in cui creo le app il 90% delle volte), farai oscillare React Navigation.

Detto questo, se avvii la tua app React Native tramite init Rea-native puoi usare React Navigation o React Native Navigation perché hai accesso alle parti native della tua app RN (le directory ios / e android /).

Reagire alla navigazione

Caratteristiche

  • Installazione semplice: è solo un pacchetto npm
  • I navigatori sono semplicemente componenti
  • Stack navigator, tab navigator e drawer navigator sono integrati
  • Componenti specifici della piattaforma (navbar su iOS sembra che dovrebbe, navbar su Android sembra che dovrebbe)
  • Impostazioni predefinite personalizzabili ma intelligenti

svantaggi

  • È più facile creare app con prestazioni scadenti perché tutto funziona sul thread JavaScript (puoi minimizzare / eliminare questo però)
  • Può essere fonte di confusione. Questo è principalmente un problema di documentazione ed esempio (lavorando su di esso!)

Reagisci Navigazione nativa

Caratteristiche

  • È performante ed è difficile romperlo. Questo perché la navigazione sta avvenendo al di fuori del thread JavaScript
  • Utilizza i componenti di navigazione "reali" (intestazione, barra delle schede) perché si interfaccia con i componenti nativi
  • È semplice da usare, una volta installato
  • Minimo boilerplate, una volta installato

svantaggi

  • Installazione complessa per sviluppatori non nativi (come me). Ad esempio, quando metto insieme la mia demo per il talk, non ho potuto eseguire il debug di un semplice problema che ho riscontrato durante l'installazione perché non conosco cose native di Android
  • Soluzioni di gestione dello stato non Redux più difficili da usare (sebbene esistano soluzioni alternative)
  • Nessun modo per definire staticamente la configurazione del percorso (mia preferenza personale)

È possibile visualizzare un confronto di questi due navigatori eseguendo uno dei progetti in questo repository.

In conclusione: ci sono molte ottime soluzioni di navigazione là fuori ma alla fine della giornata guarderei React Navigation o React Native Navigation per le mie esigenze di navigazione. Sono entrambe grandi biblioteche.

La navigazione è solo un aspetto della tua app. Se sei interessato a qual è il mio ambiente di sviluppo esatto e i passaggi che faccio per ogni app React Native che creo, dai un'occhiata a questa serie gratuita.