Scopri come creare un solido sistema di navigazione per la tua app React Native utilizzando la libreria React Navigation.

Le app mobili dovrebbero avere un sistema di navigazione che guidi gli utenti senza sforzo attraverso varie schermate e funzionalità.

React Navigation, una libreria di navigazione potente e flessibile per React Native, può aiutarti a creare quell'esperienza. Sfruttando le sue capacità, puoi costruire senza sforzo un ottimo sistema di navigazione mobile.

Installazione della libreria di navigazione React

React Navigation offre tre modelli di navigazione principali, vale a dire la navigazione Stack, Tab e Drawer per la creazione di un sistema di navigazione. Questi modelli di navigazione forniscono un framework per l'organizzazione e la gestione della navigazione tra schermate diverse all'interno dell'app.

Per iniziare a utilizzare React Navigation, installa la libreria e le relative dipendenze necessarie:

npm installa @react-navigation/native
npm install react-native-screens react-native-safe-area-context
instagram viewer

Configurazione di un navigatore

Ogni navigatore all'interno di React Navigation vive nella propria libreria separata. Per utilizzare uno qualsiasi dei navigatori, dovrai installarli singolarmente.

Una struttura di progetto ben ponderata è utile quando si crea un sistema di navigazione per la tua app mobile. Una buona pratica è creare un file src cartella nella directory principale del progetto. All'interno di questa cartella, dovresti avere un file schermi cartella. Questo servirà a separare i componenti dello schermo dagli altri componenti.

Scriverai il codice per impostare il modello di navigazione che stai utilizzando all'interno del tuo progetto App.js file.

Creazione di un Navigatore all'interno del file App.js file è una best practice per diversi motivi:

  • IL App.js file è in genere il componente di primo livello in un'app React Native. La definizione del Navigatore in questo file assicurerà che la gerarchia di navigazione sia al livello più alto dell'albero dei componenti e sia accessibile ovunque.
  • Posizionando il Navigatore nel App.js file ti consente di accedere facilmente e trasmettere lo stato e gli oggetti di scena a livello di app agli schermi all'interno del navigatore.
  • Reagisci alla navigazione Contenitore di navigazione fornisce il contesto necessario per la navigazione e si trova tipicamente all'interno App.js. Posizionando il Navigatore nello stesso file, puoi facilmente integrarlo con il file Contenitore di navigazione.

Navigatore di pile

Lo Stack Navigator è il modello di navigazione più popolare all'interno della libreria React Navigation. Utilizza una struttura di dati stack in cui ogni schermata è un componente completamente diverso ed è impilata sopra quella precedente.

Quando un nuovo schermo viene inserito in cima alla pila, diventa lo schermo attivo e lo schermo precedente viene lanciato sotto di esso. Ciò consente agli utenti di navigare avanti e indietro nello stack, come il flusso di navigazione di un sito web. Puoi impostare lo stack navigator per passare da una schermata all'altra.

Per esempio:

importare Reagire da'reagire';
importare {Contenitore di navigazione} da'@react-navigazione/nativo';
importare { createStackNavigator } da'@react-navigazione/stack';
// Importa i componenti dello schermo
importare Schermo di casa da'./screens/HomeScreen';
importare DettagliSchermata da'./screens/DetailsScreen';


cost Pila = createStackNavigator();


cost Applicazione = () => {
ritorno (


"Casa" component={HomeScreen} />
"Dettagli" component={DettagliScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
esportarepredefinito Applicazione;

Il blocco di codice precedente crea un componente Stack Navigator utilizzando createStackNavigator() dalla libreria di navigazione.

In questo esempio, lo Stack Navigator ha due schermate: Casa E Dettagli.

Ora installa Stack Navigator:

npm installa @react-navigation/stack

Dentro Schermo di casa, puoi usare il navigazione oggetto per testare lo Stack Navigator:

importare { Foglio di stile, Visualizza, Pulsante } da"nativo di reazione";
importare Reagire da"reagire";
cost Schermata iniziale = ({ navigazione }) => {
ritorno (

 titolo="Navigare verso .."
 onPress={() => navigazione.navigate("Dettaglio schermo")}
 />
 </View>
 );
};


esportarepredefinito Schermo di casa;
cost styles = StyleSheet.create({});
2 Immagini

Nota come Stack Navigator crea automaticamente un pulsante freccia per gestire la navigazione indietro alle schermate precedenti.

Navigatore schede

In alcune situazioni, avere un sistema di navigazione avanti e indietro come Stack Navigator non offre una grande esperienza. Un navigatore a schede è più adatto per questi casi. Visualizza le schermate di navigazione disponibili in anticipo per l'utente e può essere più facile da usare, come una barra di navigazione web.

Per iniziare, installa il file @react-navigation/bottom-tabs libreria utilizzando il gestore di pacchetti NPM.

Con createBottomNavigator(), puoi creare un'istanza del Navigatore schede come hai fatto con il Navigatore stack:

importare { createBottomTabNavigator } da'@react-navigation/bottom-tabs';
cost Tab = createBottomTabNavigator();

Quindi, definisci le schermate che desideri come schede all'interno del navigatore e Contenitore di navigazione:

esportarepredefinitofunzioneApp() {
ritorno (


 nome="Casa"
 componente={HomeScreen}
 opzioni={{ titolo: "Casa" }}
 />
 nome="Profilo"
 componente={ProfileScreen}
 opzioni={{ titolo: "Profilo" }}
 />
 nome="Dettagli"
 componente={DetailScreen}
 opzioni={{ titolo: "Dettagli" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Quando esegui la tua app, dovresti vedere un Navigatore schede con le tue schermate definite in basso.

3 immagini

Potresti usare il tabBarPosition oopzione per posizionare il navigatore al superiore, Giusto, Sinistra, O metter il fondo a (predefinito).

Navigatore di cassetti

I Drawer Navigator, o cassetti, sono uno schema di navigazione comune nelle applicazioni mobili. Puoi aprire i cassetti scorrendo o toccando un pulsante. Questo fa scivolare il cassetto dal lato dello schermo, rivelando il suo contenuto.

2 Immagini

Per utilizzare Drawer Navigator, installalo insieme a gestore-gesture-nativo-di-reazione E reagire-nativo-rianimato:

npm installa @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Dovrai anche configurare rianimato all'interno del tuo babel.config.js file:

modulo.esporta = {
 preimpostazioni: ["babel-preset-expo"],
 plugin: ["react-native-rianimato/plugin"],
};

Ecco un esempio di come impostare un Drawer Navigator:

importare"react-native-gesture-handler"; // Questa importazione deve essere in alto
importare {Visualizza, Testo, Pulsante} da"nativo di reazione";
importare { createDrawerNavigator } da"@react-navigazione/cassetto";
importare {Contenitore di navigazione} da"@react-navigazione/nativo";


cost Cassetto = createDrawerNavigator();


cost Contenuto cassetto = ({ navigazione }) => {
ritorno (
flettere: 1, alignItems: "centro", justifyContent: "centro" }}>
dimensione del font: 24, fontWeight: "grassetto" }}>
 Benvenuti nel cassetto
 </Text>

 Questo è un contenuto extra che puoi visualizzare In il cassetto.
 </Text>


cost Applicazione = () => (

 nomepercorsoiniziale="Casa"
 drawerContent={(oggetti di scena) => <Contenuto del cassetto {...oggetti di scena} />}
 >
 {/* Gli altri tuoi schermi qui */}
 </Drawer.Navigator>
 </NavigationContainer>
);
esportarepredefinito Applicazione;

In questo esempio, il Contenuto del cassetto componente viene passato come cassettoContenuto prop a createDrawerNavigator. Dentro il Contenuto del cassetto componente, è possibile personalizzare il contenuto per visualizzare le informazioni desiderate utilizzando componenti di testo o qualsiasi altro elemento e stile.

I navigatori a schede sono statici e sempre visibili. Questo non è sempre il massimo, poiché le schede bloccano parti dello schermo e possono distogliere l'attenzione dalla schermata principale. È possibile utilizzare i cassetti come navigatore di schede dinamico e creare un menu di navigazione all'interno dei cassetti. Gli utenti possono quindi aprire il cassetto per trovare un menu di navigazione.

Puoi anche utilizzare il cassetto per visualizzare contenuti aggiuntivi come una barra di ricerca, un profilo utente, informazioni contestuali o qualsiasi cosa che non richieda una visualizzazione a schermo intero.

Prendi in considerazione queste best practice per ottenere il massimo dal Drawer Navigator:

  • Evita di sovraccaricare il cassetto con troppe opzioni e concentrati sulla presentazione delle funzionalità più rilevanti e utilizzate di frequente.
  • Classifica gli elementi correlati in modo logico e intuitivo per aiutare gli utenti a trovare rapidamente ciò che stanno cercando.
  • Usa icone o indicatori visivi per aiutare gli utenti a capire lo scopo di ogni elemento nel cassetto.

Passaggio di dati con oggetti di scena per la navigazione

React Navigation fornisce un potente meccanismo che ti consente di passare i dati attraverso oggetti di scena di navigazione.

Considera uno scenario in cui hai un elenco di elementi su una schermata e quando un utente seleziona un elemento, vuoi passare i dati corrispondenti a un'altra schermata.

Innanzitutto, devi definire la tua struttura di navigazione. Ora, per passare i dati dal file Schermo di casa ad un DetailScreen quando un elemento è selezionato, all'interno Schermo di casa definire una funzione che gestisca la navigazione e includa i dati che si desidera passare.

importare Reagire da'reagire';
importare {Visualizza, Testo, Pulsante} da'nativo di reazione';
cost Schermata iniziale = ({ navigazione }) => {
cost handleItemPress = (articolo) => {
 navigazione.navigare('Schermata di dettaglio', { articolo });
 };


ritorno (

Elenco Di Articoli</Text>
esportarepredefinito Schermo di casa;

IL handleItemPress funzione utilizza il navigazione.navigare metodo per navigare al DetailScreen passando i dati dell'elemento selezionato come parametro nel secondo argomento.

Per poter accedere ai dati passati all'interno del DetailScreen componente, avrai bisogno del navigazione puntello:

importare Reagire da'reagire';
importare { Visualizza, Testo } da'nativo di reazione';
cost DetailScreen = ({ navigazione }) => {
cost elemento = navigazione.getParam('articolo', '');


ritorno (

Schermata di dettaglio</Text>
{articolo}</Text>
 </View>
 );
};
esportarepredefinito Schermata di dettaglio;

Ecco, il DetailScreen usi dei componenti navigazione.getParam per recuperare l'elemento passato dagli oggetti di scena di navigazione. In questo esempio, viene impostato un valore predefinito di una stringa vuota nel caso in cui i dati non siano disponibili. In questo modo, la tua app non si bloccherà durante il rendering.

A seconda della complessità della tua app, puoi esplorare utilizzando le librerie di gestione dello stato come Redux o l'API di contesto per gestire e condividere i dati a livello globale.

Organizzare il codice di navigazione

Organizzare correttamente il tuo codice di navigazione ti aiuterà a creare un'app React Native scalabile e collaborativa. Puoi farlo suddividendo la logica di navigazione in moduli gestibili. Questo renderà più facile la lettura e la comprensione.

Con questo, puoi essere sicuro di creare una navigazione senza interruzioni per i tuoi utenti mentre ti godi l'esperienza di sviluppo.