Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Gen 03
navigazione tra più pagine con react native

React Native: Navigazione tra più pagine, Routing

  • 03/01/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • app, app smartphone, react, react native

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”.

React Native folders cartelle

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:

Development Category (English)728x90

 

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:

Home imparare React native

Info imparare React Native

Per quanto riguarda Android vedrai invece queste schermate:

Android react-navigation

Android react-navigation infos

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:

  • The Complete React Native and Redux Course
  • React Native: Advanced Concepts
  • Create your first React Native App

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!).

Prossimo articolo della guida: React Native: cos’è Realm e setup iniziale

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • React Native: come salvare le foto su Firebase Storage10/01/2018
  • React Native: come modificare lo schema Realm10/01/2018
  • React Native: Come scattare foto con react-native-camera09/01/2018
  • React Native: Salvare i dati con Firebase08/01/2018

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...