React Native Componets Collection

Scritto il August 24, 2022  •  2 minuti  • 355 parole

In questo post si propongono i componenti più importanti che si trovano sul web commentandone pregi e difetti. Si ricorda che questo post sarà aggiornato di volta in volta e rappresenta un punto di riflessione e studio verso la UI/UX mobile.

HeaderNavBar

• Framework/Librerie: React Navigation

HeaderNavBar è una barra di navigazione che generalmente si trova nella parte superiore dello screen. Generalmente suddivisa in tre parti, l’HeaderNavBar informa l’utente sulla sezione del app in cui si trova (come un titolo di una qualsiasi pagina web) e guida l’utente spostandolo verso altre funzionalità o variando alcune impostazioni. Generalmente il layout è suddiviso in tre parti :

• pulsante che consente di tornare indietro alla schermata precedente
• stato, in cui è descritto il contesto dello screen (es. per un blog: modifica post, nuovo post )
• pulsante di interazione avanzata, per eseguire macro operazioni che non sarebbero visibili direttamente nello screen corrente (es. per un blog: cancella post, aggiungi tag, … oppure un menu)

La descrizione fornita però è molto orientativa in quanto può essere personalizzata a piacere. Altra particolarità è il fatto che essa possa essere fissa o meno sulla parte superiore dello schermo (si veda la differenza ad esempio tra Instagram e Spotify).

Forse la particolarità più importante è il fatto che essa si trova nella parte superiore dello screen. Da un’analisi dell’uso proposto in React Navigation infatti si può intuire che la sua posizione una volta definita non cambierà facilmente durante l’esecuzione dell app.

BottomNavBar

• Framework/Librerie: React Navigation

BottomNavBar è una barra di navigazione simile alla HeaderNavBar che generalmente si trova nella parte inferiore dello screen. Spesso la si trova suddivisa in parti uguali e contiene pulsanti per la navigazione dell’utente verso altre funzionalità accessibili su altri screen.

Anche questa descrizione è molto generica, in quanto il componente può essere avere differenti stili e comportamenti a seconda della applicazione (vedi spotify con brano in riproduzione).

La sua particolarità, come per la HeaderNavBar è quella di essere presente nella parte inferiore dello screen. Da un’analisi dell’uso proposto in React Navigation infatti si può intuire che la sua posizione una volta definita non cambierà facilmente durante l’esecuzione dell app.