Navigazione Multi-Pagina in React Native

In questo articolo, esploreremo come implementare la navigazione tra più pagine all'interno di un'applicazione React Native.

Introduzione alla Navigazione in React Native

Per chi ha familiarità con ReactJS, il concetto di "routing" e l'utilizzo di `react-router` sono ben noti. In React Native, si adotta un approccio simile, ma con un pacchetto specifico messo a disposizione per questo framework. Questo articolo fa parte di una guida più ampia dedicata all'apprendimento di React Native, fornendo un punto di partenza per gli utenti che desiderano seguire il percorso dall'inizio o riprodurre lo stesso scenario.

Preparazione dell'Ambiente di Lavoro

Dopo aver seguito la guida iniziale, è possibile aprire la cartella del progetto "paoloApp" con il proprio editor di testo o IDE preferito. Al suo interno, si troveranno i file principali:

• index.js
• App.js
• package.json

Per implementare la navigazione tra più pagine, è necessario eseguire alcuni passaggi descritti di seguito.

Struttura dei File

Per prima cosa, crea una cartella denominata "src" direttamente nella root del tuo progetto. All'interno di "src", crea una sottocartella "components". Questa cartella "components" ospiterà i componenti React dell'applicazione. All'interno di "components", crea due nuove cartelle: "home" con il file "home.js" e "info" con il file "info.js".

Configurazione dei Componenti Home e Info

Prendi il contenuto del file App.js e copialo all'interno del file home.js, ricordandoti di cambiare il nome della classe da `App` a `Home`. In questo modo, il componente `Home` sarà inizialmente identico a quanto già presente. Successivamente, apri il file info.js e inserisci un semplice codice che visualizzi a schermo il testo "Informazioni".

Il componente `Info` sarà strutturato come segue:

• Importazione di React e Component da react.
• Importazione di StyleSheet, Text e View da react-native.
  • La View è essenziale come contenitore per altri componenti, come il Text, che serve per mostrare del testo.
  • StyleSheet è utilizzato per definire gli stili dei componenti.
• Definizione della classe Info che estende Component.
• Creazione del metodo render che restituisce una View contenente il testo.
• Definizione degli stili. Gli stili vengono creati passando un oggetto al metodo create di StyleSheet e sono molto simili al CSS. Alcune proprietà cambiano nome o sono semplicemente proprietà CSS scritte in CamelCase (ad esempio, fontSize è l'equivalente di font-size in CSS).

Implementazione della Navigazione con `react-navigation`

Per implementare la navigazione tra più pagine in React Native, è necessario installare il pacchetto react-navigation (esistono altri pacchetti simili, ma per questo esempio useremo questo).

Configurazione del Navigatore

Una volta installato il pacchetto, procediamo con l'implementazione della navigazione:

1. Importazione del TabNavigator da react-navigation.
2. Importazione dei componenti Home e Info creati precedentemente.
3. Creazione dell'applicazione come TabNavigator, costruito con un oggetto che include le proprietà Home e Info. Per ogni schermata, impostiamo il componente da mostrare (proprietà screen) e l'etichetta da visualizzare (Home e Infos).

Test del Funzionamento

Dopo aver inserito la navigazione tra più pagine con React Native, è fondamentale testarne il corretto funzionamento. Come spiegato nell'articolo sul setup iniziale, è possibile avviare il simulatore iOS su Mac tramite il comando react-native run-ios, oppure avviare l'emulatore Android utilizzando Android Studio e successivamente eseguire il comando react-native run-android.

Ecco come si presenta l'app sul simulatore iOS:

Per quanto riguarda Android, vedrai schermate simili:

Differenze tra Piattaforme e User Experience

Hai imparato a creare un menu per la tua applicazione. Esistono ovviamente altri modi per crearne uno. Avrai sicuramente notato che ci sono delle differenze nella visualizzazione del menu tra iOS e Android. La navigazione tra più pagine con React Native, così come tutti i componenti creati dalla community, presenta già delle differenze basate sul concetto che gli utenti sono abituati a eseguire azioni in modi diversi a seconda del sistema operativo. Ciò non toglie che è sempre possibile creare una navigazione personalizzata e renderla identica su ogni dispositivo.

tags: #react #native #righe #sovrapposte