Come funziona la navigazione per la tua app mobile utilizzando React Native?

Blog

Come funziona la navigazione per la tua app mobile utilizzando React Native?

introduzione

La creazione di un'interfaccia utente di navigazione intuitiva è essenziale per qualsiasi app mobile. Poiché realizziamo software personalizzato in SmartLogic, la maggior parte delle nostre app mobili richiede diverse configurazioni di navigazione, ma spesso hanno molto in comune. Usiamo React Navigation che rende facile per gli utenti spostarsi su schermi diversi. Le opzioni integrate ci consentono di aggiungere rapidamente funzionalità dell'interfaccia utente pur essendo completamente personalizzabili. In questo post, esaminerò uno schema di navigazione React di base che abbiamo usato e i passaggi per farlo funzionare.



Di seguito è riportato un esempio dell'architettura dei modelli comuni che utilizziamo. Abbiamo la navigazione principale per la nostra app, diversi stack di navigazione (ne parleremo più avanti), schermate e anche una configurazione di navigazione a schede.

Albero dei file

OurApp App.js Containers RootContainer.js HomeScreen.js LoginScreen.js ImportContactsScreen.js ChatListScreen.js ProfileScreen.js TransactionListScreen.js Navigation AppNavigator.js TabNavigator.js HomeStack.js ChatStack.js TranactionsStack.js components BackArrow.js

Installazione

Installare React Navigation nel tuo progetto è facile. Ecco i comandi principali per iniziare.



Nella directory principale del tuo progetto esegui:

`filato aggiungi reattività-navigazione`

Se stai utilizzando il flusso di lavoro gestito da Expo, non è necessario aggiungere quanto segue poiché è già incluso e puoi passare alla sezione successiva.



**Quindi:**

yarn add react-native-gesture-handler

**Collega RN Gesture Handler eseguendo:** `react-native link react-native-gesture-handler` **Configurazione aggiuntiva di Android Gesture Handler:** Il tuo file `MainActivity.java` dovrebbe avere il seguente aspetto; dovrai aggiungere le righe che hanno un +: |_+_|

Architettura di navigazione

Componente radice

|_+_| è il punto di ingresso per l'app, è il componente di primo livello. In esso includeremo un |_+_| componente che conterrà la navigazione dell'app.

file: |_+_|

cambia il carattere di google chrome
package com.reactnavigation.example; import com.facebook.react.ReactActivity; + import com.facebook.react.ReactActivityDelegate; + import com.facebook.react.ReactRootView; + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return 'Example'; } + @Override + protected ReactActivityDelegate createReactActivityDelegate() { + return new ReactActivityDelegate(this, getMainComponentName()) { + @Override + protected ReactRootView createRootView() { + return new RNGestureHandlerEnabledRootView(MainActivity.this); + } + }; + } }

< Contenitore radice />

Il nostro RootContainer conterrà la navigazione root dell'app

percorso file: |_+_|

App.js

|_+_| è la base della nostra navigazione app. Il percorso iniziale è impostato da |_+_| ed è qui che l'app inizia quando gli utenti la aprono per la prima volta. Qui stiamo iniziando da |_+_|, che è uno stack di navigazione nidificato.

Stack di navigazione nidificati, o semplicemente pile , sono un modo per organizzare i nostri schermi in gruppi. Raggruppiamo le schermate che seguono un flusso comune mentre gli utenti navigano nell'app.

Abbiamo definito la costante |_+_| per una facile esportazione che utilizza per creare percorsi per ciascuno degli stack che useremo e OurApp/App.js per creare il contenitore di navigazione.

|_+_| è il nostro navigatore stack. In sostanza, stiamo creando uno stack di tutti gli stack e poi lo trasformiamo nel nostro contenitore di navigazione principale.

percorso file: |_+_|

reagire mela nativa paga
import React, { Component } from 'react' import RootContainer from './app/containers/RootContainer' export default class App extends Component { render () { return ( ) } }

|_+_| restituisce un componente React, che stiamo esportando e usiamo nel |_+_|. Per organizzazione, ho messo il mio Stack Navigator in un file separato.

In esso, ho definito un percorso per ciascuno dei diversi stack che abbiamo e ho impostato lo schermo di ciascun percorso in modo che punti al componente dello stack che definisce gli schermi per ogni stack. Di solito mettiamo i nomi degli stack in case di serpente urlanti solo per distinzione, questo non è richiesto.

Componenti stack individuali

In ciascuno dei componenti dello stack, stiamo collegando schermate che andrebbero logicamente insieme per formare un flusso di navigazione.

Usiamo |_+_| di nuovo per creare un percorso per ogni schermata nello stack. E poiché manteniamo il nome del percorso uguale ai nomi delle schermate, non dobbiamo impostare lo schermo separatamente.

file: |_+_| cartella:

OurApp/app/containers/RootContainer.js

Navigatore schede

Abbiamo relativamente pochi stack e schermate in cui spostarci in questa app, quindi utilizziamo la navigazione con la scheda in basso tramite import React, { PureComponent } from 'react' import { StatusBar, View } from 'react-native' import AppNavigator from '../navigation/AppNavigator' export default class RootContainer extends PureComponent { render () { return ( ) } } una volta che gli utenti hanno effettuato l'accesso per spostarsi tra i tre stack principali.

Utilizziamo le icone che gli utenti devono premere per accedere a ciascuno dei tre stack nel navigatore a schede. Il navigatore rimarrà visibile nella parte inferiore di ogni schermata verso cui l'utente naviga.

Definiamo le icone in alto, rendering Reagire icone vettoriali native componenti, che abbiamo già incluso nella nostra app e in |_+_| impostiamo i colori delle icone attive/inattive che provengono da |_+_| file in cui sono definiti tutti i colori delle nostre app.

file: |_+_|

App Navigator

Ciascuno dei percorsi di cui sopra è uno schermo o una pila a sé stante. Gli stack sono strutturati in modo simile a |_+_| sopra tranne che usiamo le intestazioni per alcune schermate.

Componenti stack individuali nel Navigatore schede: ChatStack

Gli elementi di intestazione che usiamo sono definiti nelle Opzioni di navigazione che è integrato in react-navigation.

Ho creato il mio personalizzato |_+_| componente per la navigazione indietro e gli ha passato l'oggetto di navigazione e tutte le azioni di navigazione che ne derivano.

L'iniziale |_+_| non ha un'intestazione, ma poiché abbiamo definito un'intestazione per tutte le nostre schermate in Opzioni di navigazione predefinite in basso, abbiamo dovuto impostare esplicitamente questa schermata per non averne una.

Per il titolo in ogni intestazione, gli passo il nome della persona con cui l'utente sta corrispondendo nella chat tramite navigazione utilizzando navigation.getParam e, in caso contrario, impostando un'opzione predefinita di backup. Puoi anche semplicemente impostarlo su una stringa.

file: |_+_|

initialRouteName

Componenti stack individuali nel Navigatore schede: TransactionStack

HomeStack

Navigazione tra le schermate

Nei componenti, per spostarsi in modo esplicito da una schermata all'altra (anziché utilizzare le intestazioni per tornare indietro), utilizzare l'oggetto di navigazione e l'azione di navigazione.

AppNavigator

Questo può essere comunemente chiamato in un |_+_| funzione.

Di seguito puoi vedere dove viene passato il nome corrispondente attraverso la navigazione per essere utilizzato in |_+_| intestazioni dello schermo. Puoi anche navigare in diversi stack in questo modo.

idee per progetti full stack
createStackNavigator()

Conclusione

Solo un esempio del mix di funzionalità che utilizziamo nella pratica e un sistema di navigazione semplice ma robusto per le app mobili.

Grazie per aver letto. Continua a visitare. Se ti è piaciuto questo post, condividilo con tutti i tuoi amici di programmazione!

#react-native #mobile-apps #web-development