Una guida completa per la navigazione dei nativi usando la navigazione reattiva

Introduzione

React Native consente di costruire applicazioni mobili native con JavaScript e React. Un aspetto critico dello sviluppo di app mobile è la navigazione: guidare gli utenti attraverso diversi schermi e funzioni senza soluzione di continuità. React Navigation] è la libreria di autenticazione più popolare, guidata dalla comunità per l'attuazione della navigazione in applicazioni React Native.

Prerequisiti e Installazione

Prima di utilizzare React Navigation, assicuratevi di avere un progetto React Native inizializzato. Se state iniziando fresco, usate il React Native CLI o l'Expo.

Installare pacchetti core

Installare i pacchetti richiesti tramite npm o filato. La libreria core e le sue principali dipendenze sono:

npm install @react-navigation/native

Quindi installare le librerie di supporto che React Navigation dipende da per la gestione dello schermo e la gestione sicura dell'area:

npm install react-native-screens react-native-safe-area-context

Per progetti React Native a nudo, seguire le istruzioni di collegamento nella documentazione ufficiale per garantire che i moduli nativi siano collegati correttamente (autolinking gestisce questo per React Native 0.60+).

Installare un Navigatore

La navigazione reatta offre più navigatori. ]il navigatore di stack nativo] è raccomandato per la maggior parte dei casi di utilizzo:

npm install @react-navigation/native-stack

Altri navigatori come ] le schede di fondo[ e []]disegnare[] sono installati separatamente:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Concetti core

La navigazione reatta è costruita intorno a tre blocchi principali:

• NavigationContainer[[] – l'involucro più esterno che gestisce l'albero di navigazione e lo stato.
• Navigatori[[] – componenti che definiscono il modello di navigazione (mancanza, scheda, cassetto).
• Screens[] – singoli componenti che rappresentano una vista o una pagina nell'app.

Ogni configurazione di navigazione deve essere avvolto in un . Questo contenitore è tipicamente posto alla radice del componente dell'app.

Impostazione di un navigatore di stack

Il navigatore stack gestisce uno stack di schermi all’ultimo in primo piano, utilizza per impostazione predefinita animazioni e gesti di transizione della piattaforma nativa.

In primo luogo, importare moduli necessari:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Creare un'istanza di navigazione stack:

const Stack = createNativeStackNavigator();

Definire il navigatore all'interno del componente App:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Ciascun richiede un prop (utilizzato per la navigazione) e un [ prop (il componente React da rendere).

Creazione di schermi e navigazione

Gli schermi sono componenti standard React. Essi ricevono due oggetti importanti: e . L'oggetto ] fornisce metodi per spostarsi tra gli schermi.

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

La schermata Dettagli non ha bisogno di usare il supporto di navigazione a meno che non abbia bisogno di navigare ulteriormente.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Metodi di navigazione

La navigazione reatta fornisce diversi metodi tramite il prop:

• navigate(nome, params)[] – si sposta su uno schermo, riutilizzando un'istanza esistente se esiste nello stack.
• push(nome, params)[] – spinge sempre un nuovo schermo sullo stack, anche se lo stesso schermo è già nello stack.
• goBack()[]] – naviga nella schermata precedente nello stack.
• sostituisci(nome, params)[] – sostituisce lo schermo corrente con un nuovo, rimuovendo la corrente dalla storia.
• reset(state)[] – ripristina l'intero stato di navigazione in un determinato oggetto di stato.

Ad esempio, per spingere una nuova istanza della schermata Dettagli e dei parametri di passaggio:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Parametri di passaggio tra schermi

I dati possono essere trasmessi a uno schermo tramite il secondo argomento a [] o . La schermata di ricezione accede a questi parametri attraverso .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Impostare i valori dei parametri predefiniti utilizzando sul componente dello schermo:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Configurazione delle opzioni di navigazione

Ogni schermo può personalizzare l'intestazione, l'icona della scheda, l'etichetta del cassetto, ecc., utilizzando il prop su ] o il prop sul navigatore.

Personalizzazione dell'intestazione

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Le opzioni dinamiche possono essere impostate utilizzando una funzione che riceve :

options={({ route }) => ({ title: route.params.name })}

Scheda Navigatore

La navigazione delle schede è comune per le sezioni delle app di alto livello.

npm install @react-navigation/bottom-tabs

Crea un navigatore di schede e combinalo con il tuo stack:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

È possibile nidificare il navigatore di scheda all'interno di un navigatore di stack o viceversa. Personalizzare le icone di scheda utilizzando il prop con .

Cassetto Navigatore

Un navigatore del cassetto scorre un cassetto da sinistra, rivelando elementi di navigazione.

npm install @react-navigation/drawer

Configurazione di esempio:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Usa per aprire e chiudere programmaticamente il cassetto.

Navigatori nidi

Le app complesse spesso nidificano i navigatori (ad esempio, un navigatore di schede all'interno di un navigatore di stack). React Navigation gestisce nidificare con grazia. Il prop fornito a qualsiasi schermo può chiamare metodi su un navigatore di genitori se necessario.

Esempio: Uno stack contenente un navigatore di schede e una schermata delle impostazioni:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Linking e deep linking

React Navigation supporta il collegamento profondo per gestire URL che aprono schermi specifici. Configurare il prop su :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Quindi gestire gli URL in arrivo. Questo consente funzionalità come notifiche push che collegano a una schermata specifica.

Flussi di autenticazione

Molte applicazioni richiedono una navigazione condizionale in base allo stato di autenticazione. Un modello comune è quello di attivare il navigatore a livello root:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

In alternativa, utilizzare un singolo stack con schermi condizionali. Evitare di flickering mantenendo la promessa o lo stato fino ad oggi.

Prestazioni e migliori pratiche

• Utilizzare nativo stack navigatore[ (non []) per prestazioni migliori e transizioni native.
• Riattiva la navigazione smonta gli schermi nascosti per impostazione predefinita per i navigatori stack, ma per i navigatori a schede, è possibile configurare il carico pigro.
• Passare solo dati primitivi attraverso parametri per evitare problemi di serializzazione.
• Usa o ] per i componenti dello schermo che spesso re-render.
• Evitare calcoli pesanti durante le transizioni di navigazione; lavoro di offload con .
• Gestisci sempre l'evento per i prompt dei cambiamenti non salvati.

Conclusioni

React Navigation fornisce un modo intuitivo, personalizzabile e performante per gestire la navigazione nelle app React Native. Padroneggiare stack, scheda, cassetto e navigatori nidificati, insieme a parametri di passaggio, deep linking e flussi di autenticazione, è possibile costruire esperienze mobili robuste. Per ulteriori dettagli, fare riferimento alla documentazione ufficiale di navigazione e la tive] Guida