Come navigare tra le schermate in un'app nativa React

Spesso, quando crei un'app React Native, la componi da schermate diverse come Login, Home e Informazioni. Dovrai quindi implementare un meccanismo di navigazione in modo che i tuoi utenti possano navigare nell'app e accedere alle sue singole schermate nell'ordine corretto.

Lo scopo di questo tutorial è guidarti attraverso il processo di configurazione di un sistema di navigazione nella tua applicazione React Native. Ciò include l'installazione della libreria, l'aggiunta degli schermi allo stack navigator e il collegamento degli schermi all'interno di ciascuno dei componenti.

Prima di iniziare

Per seguire questo tutorial sul tuo computer locale, devi avere installato quanto segue:

• Node.js v10 o superiore
• Xcode O Studio Android (impostato per eseguire l'emulatore)
• Reagisci alla CLI nativa

Per istruzioni dettagliate su come configurare il tuo ambiente di sviluppo React Native, puoi leggere il file ufficiale React nativo documentazione di montaggio.

Prima di iniziare a esaminare come implementare la navigazione nella nostra app React Native, cerchiamo di capire come funziona il meccanismo di navigazione dello stack in React Native.

Capire come funziona la navigazione in pila

Immagina che la tua applicazione React Native sia uno stack. Inizialmente, su quella pila, hai Casa, ovvero la prima schermata visualizzata all'apertura dell'app.

Se dovessi navigare verso il Di schermo dal Casa schermo, l'app spingerebbe Di sulla pila, quindi si trova in cima a Casa. Allo stesso modo, l'app spinge ogni nuova schermata in cui navighi nello stack.

Ora, se vuoi tornare alla schermata precedente, l'app estrae la schermata corrente dallo stack e ti mostra quella sottostante. Questo comportamento è simile a quello che accade quando fai clic sull'icona "indietro" nel tuo browser web.

Con una chiara comprensione del meccanismo di navigazione dello stack, è giunto il momento di configurarlo in un'app React Native.

1. Installa React Navigation per app native

Per iniziare, installa il file Pacchetto di navigazione React per le app native nel tuo progetto React Native eseguendo questo comando su un terminale:

npm i @reagire-navigazione/nativo

Il pacchetto appena installato richiede Reagisci allo stack nativo E Reagisci agli schermi nativi per funzionare correttamente. Per installare RN Stack, eseguire:

npm i @reagire-navigazione/nativo-pila

Per installare il secondo, esegui questo:

npm reagisco-nativo-schermi

Ora hai tutto il necessario per iniziare a creare il meccanismo di navigazione nella tua applicazione. Il passaggio successivo consiste nell'impostare gli schermi.

2. Imposta lo schermo nella tua app nativa React

Per questo esempio, creeremo solo due schermate: la schermata iniziale e la schermata delle informazioni.

Crea una cartella denominata schermi all'interno della directory principale dell'applicazione. Successivamente, crea due file denominati HomeScreen.js e AboutScreen.js all'interno della directory schermi.

Cosa aggiungere al file HomeScreen.js

Apri il file HomeScreen.js e inizia importando quanto segue:

importare * COME Reagire da'reagire';
importare {Testo, Visualizza, Foglio di stile, TouchableOpacity} da'nativo di reazione';
importare { usaStato } da'reagire'

Successivamente, crea il componente funzionale HomeScreen e accedi all'oggetto di navigazione utilizzando la decostruzione dell'oggetto (come per Reagisci alle migliori pratiche), quindi restituisci un titolo e un pulsante per navigare nella schermata delle informazioni:

esportarepredefinitofunzioneSchermo di casa({navigazione}) { 
ritorno ( 
<Visualizzazionestile={styles.container}>
<Testostile={stili.paragrafo}> Schermo di casa Testo>
 titolo="Vai a Informazioni"
 onPress={() => navigazione.navigate('Informazioni sullo schermo')} 
 /> 
Visualizzazione>
 );
}

Qui stiamo dicendo a React Native di navigare verso Di quando un utente preme il pulsante. In questo caso, non stiamo passando alcun dato allo schermo. Ma supponi di volerlo passare i dati alla funzione; ecco come lo faresti:

esportarepredefinitofunzioneSchermo di casa({navigazione}) { 
cost dati = { websiteName: "La tecnologia di John" }
ritorno ( 
<Visualizzazionestile={styles.container}>
// Il testo va qui 
 titolo="Vai a Informazioni"
 onPress={() => navigazione.navigate('Informazioni sullo schermo', dati)} 
 /> 
Visualizzazione>
 );
}

Ora, quando premi il pulsante, questo codice passa i dati alla schermata successiva, Di. Dentro il Informazioni suScreen.js file, è possibile accedere ai dati dal percorso e visualizzarli sull'interfaccia utente.

Cosa aggiungere al file AboutScreen.js

Apri il file AboutScreen.js e inizia importando le seguenti dipendenze:

importare * COME Reagire da'reagire';
importare {Testo, Visualizza, Foglio di stile, Pulsante} da'nativo di reazione';

Quindi, crea il file Informazioni suScreen componente funzionale che riceve i dati dal route.params property e restituisce i dati nell'interfaccia utente:

esportarepredefinitofunzioneInformazioni suScreen({itinerario}) { 
permettere dataObj = route.params
ritorno ( 
<Visualizzazionestile={styles.container}>
<Testostile={stili.paragrafo}>
 Questo È la schermata Informazioni di {dataObj.websiteName} 
Testo>
Visualizzazione>
 );
}

Se ricordi, abbiamo specificato una singola proprietà nell'oggetto dati denominato websiteName, che ora rendiamo all'interno di componente. Puoi aggiungere tutte le proprietà che desideri nell'oggetto e accedervi all'interno del componente schermate di destinazione.

Il passaggio successivo consiste nell'impostare il nostro stack navigator con i due schermi.

3. Collegamento degli schermi con Stack Navigator

All'interno di App.js, inizia importando le seguenti dipendenze:

importare * COME Reagire da'reagire';
importare Schermo di casa da'./screens/HomeScreen'
importare Informazioni suScreen da'./screens/AboutScreen'
importare {Contenitore di navigazione} da"@react-navigazione/nativo"
importare { createNativeStackNavigator } da"@react-navigation/native-stack"

Nelle righe due e tre, abbiamo importato i due schermi appena creati. Quindi, abbiamo importato Contenitore di navigazione

da @react-navigation/native E createNativeStackNavigator da @react-navigation/native-stack per aiutarci a collegare gli schermi.

Avanti, chiama createNativeStackNavigator per recuperare lo Stack:

cost Pila = createNativeStackNavigator()

Questo ci consente di "impilare" le schermate tra cui vuoi passare nella tua app.

Crea la funzione del componente App e restituisci entrambe le schermate nel file come mostrato di seguito. Assicurati di avvolgerlo nel o non funzionerà:

esportarepredefinitofunzioneApp() { 
ritorno ( 
<Contenitore di navigazione>
<Pila. Navigatore>
<Pila. Schermonome="Schermo di casa"componente = {Schermo di casa} />
<Pila. Schermonome="Informazioni sullo schermo"componente = {Informazioni sullo schermo} />
Pila. Navigatore>
Contenitore di navigazione>
 );
}

Questo codice posiziona la schermata HomeScreen in cima allo stack, il che significa che l'app eseguirà prima il rendering del componente Home al termine del caricamento.

Adesso è tutto apposto. Puoi testare l'app facendo clic su Vai a Informazioni pulsante sull'interfaccia utente Home. Questo dovrebbe reindirizzarti a Di, e troverai il websiteName proprietà visualizzata nell'interfaccia utente:

La cosa migliore dell'utilizzo di React Navigation for Native è che è così facile da configurare e utilizzare. Non richiede alcuna configurazione aggiuntiva (oltre alle librerie richieste che hai installato) e puoi anche connetterti diversi tipi di Paywall (se intendi creare un'app basata su abbonamento).

Ulteriori informazioni su React Native

React Native è un framework multipiattaforma per la creazione di applicazioni eseguibili su dispositivi Android e iOS. C'è così tanto da imparare su React Native e se sei nuovo nell'utilizzo del framework, dovresti iniziare imparando le basi.