In questo articolo ti faccio vedere come inserire all’interno di un’app la navigazione tra più pagine con React Native. Per chi conosce già ReactJS potremmo dire che è abituato a sentire il termine “routing” ed ad utilizzare react-router. In questo caso utilizziamo un pacchetto messo a disposizione appositamente per chi utilizza React Native.

Questo articolo fa parte di una guida ben più ambia che aiuta gli utenti ad imparare React Native. Puoi partire da lì se vuoi seguirla da zero o se vuoi capire dove siamo arrivati così da riprodurre la stessa situazione e provare quanto stiamo per realizzare.

Navigazione tra più pagine con React Native

Una volta seguita l’ultima guida (puoi trovarla quì) puoi aprire con il tuo editor di testo preferito o IDE la cartella della “paoloApp”. Al suo interno trovi come sempre i file che ti interessano di più ovvero:

index.js
App.js
package.json

Per effettuare la navigazione tra più pagine con React Native hai la necessità di fare alcune cose che ti descrivo passo dopo passo.

I file

Per prima cosa crea una cartella “src” direttamente nella root del tuo progetto che al suo interno contenga la cartella “components”. Quest’ultima cartella conterrà i nostri componenti React. Al suo interno crea quindi una cartella “home” che contenga il file “home.js” ed una cartella “info” che contenga il file “info.js”.

A questo punto prendi il contenuto di App.js e copialo all’interno del file home.js (cambia il nome della classe da App a Home). Avremo quindi che la nostra Home al momento sarà identica a quanto già abbiamo. Dunque apri invece il file info.js ed inserisci un banale codice che vada a scrivere a schermo solo “Informazioni”. Ecco il codice:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Info extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.info}>
          Informazioni.
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  info: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

In ordine abbiamo:

Importato react e Component da react
Importato StyleSheet, Text e View da react-native
La View è necessaria come contenitore di altri componenti: un esempio in questo caso è il Text che serve appunto per mostrare del testo. StyleSheet ci serve per dare uno stile ai nostri componenti.
Definito la classe Info che estende Component
Creato il metodo di render che ritorna una View con all’interno del testo
Definito gli stili
Gli stili vengono creati passando un oggetto al metodo “create” di StyleSheet e sono molto simili al CSS che già probabilmente conosci. Alcune proprietà cambiano nome altre non sono altro che le proprietà CSS separate da una lettera maiuscola (fontSize è il corrispettivo di font-size nel CSS).

La navigazione

Ovviamente questo non basta. Vogliamo inserire la navigazione tra più pagine con React Native e quindi è necessario che installiamo “react-navigation” (ci sono anche altri pacchetti, ma userò questo). Quindi eseguiamo:

npm install --save react-navigation

A questo punto dobbiamo inserire la navigazione tra più pagine con React Native. Apri il file App.js e modificalo in questo modo:

Deep Learning Specialization on Coursera

import { TabNavigator } from 'react-navigation';

import Home from "./src/components/home/home";
import Info from "./src/components/info/info";

const App = TabNavigator({
  Home: { 
    screen: Home,
     navigationOptions: {
      tabBarLabel: 'Home',
    }
  },
  Info: {
    screen: Info,
    navigationOptions: {
      tabBarLabel: 'Infos',
    }
  }
});


module.exports = App;

In ordine stiamo:

Importando il TabNavigator di react-navigation
Importando Home e Info creati poco fa
Creiamo la nostra App come TabNavigator costruito con un oggetto dalle proprietà Home e Info
Per ogni schermata impostiamo al momento qual’è il componente da mostrare (proprietà screen) e qual’è l’etichetta da mostrare (Home e Infos)

Proviamo il funzionamento

Bene hai inserito la navigazione tra più pagine con React Native. Adesso devi provare che il tutto funzioni. Come spiegato nell’articolo sul setup iniziale puoi far partire il simulatore iOS su Mac tramite “react-native run-ios” oppure far partire l’emulatore Android con l’utilizzo di Android Studio e dopo di che lanciare il comando “react-native run-android”.

Ecco come si presenta l’app sul simulatore iOS:

Per quanto riguarda Android vedrai invece queste schermate:

Conclusioni

In questa guida hai imparato a creare un menù per la tua applicazione. Ovviamente ci sono anche altri modi per crearne uno. Ti sarai sicuramente accorto che ci sono delle differenze tra come viene visualizzato il menù con iOS e come viene visualizzato con Android. La navigazione tra più pagine con React Native, così come tutti i componenti che sono stati creati dalla community, riporta già le prime differenze che si basano sul concetto che gli utenti sono abituati ad eseguire delle azioni in maniera differente a seconda del sistema operativo. Ciò non toglie che nessuno ti vieta di creare la tua navigazione e renderla identica su ogni dispositivo (scopri di più sulla User Experience leggendo questo articolo).

Su Udemy puoi trovare tanti corsi interessanti nei riguardi di React Native:

Non ti perdere quindi la guida salvandoti il link alla guida per imparare React Native.

Se sei interessato continua a seguirmi, magari iscriviti alla newsletter così da non dimenticarti di questa guida. Nel caso in cui ancora non ti senti pronto con React puoi sempre seguire questa guida e poi potrai imparare React Native.

Se vuoi rimanere aggiornato sul continuo di questa guida ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?

Per dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).