RN Lez 25: React Navigation — Stack

Docs: Navigation

Obiettivi

• Installare React Navigation
• Creare Stack navigator
• Passare parametri tra schermate

---

1. Installazione

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

---

2. Stack Navigator base

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

type RootStackParamList = {
    Home: undefined;
    Dettaglio: { id: number; nome: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen}
                    options={{ title: 'Home' }} />
                <Stack.Screen name="Dettaglio" component={DettaglioScreen}
                    options={{ title: 'Dettaglio' }} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

---

3. Schermate

Home — naviga a Dettaglio

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

type HomeNavProp = NativeStackNavigationProp<RootStackParamList, 'Home'>;

function HomeScreen() {
    const navigation = useNavigation<HomeNavProp>();

    return (
        <View>
            <Button
                title="Vedi Mario"
                onPress={() => navigation.navigate('Dettaglio', {
                    id: 1,
                    nome: 'Mario Rossi'
                })}
            />
        </View>
    );
}

Dettaglio — riceve parametri

import { useRoute, RouteProp } from '@react-navigation/native';

type DettaglioRouteProp = RouteProp<RootStackParamList, 'Dettaglio'>;

function DettaglioScreen() {
    const route = useRoute<DettaglioRouteProp>();
    const { id, nome } = route.params;

    return (
        <View>
            <Text>ID: {id}</Text>
            <Text>Nome: {nome}</Text>
        </View>
    );
}

---

4. header options

<Stack.Navigator
    screenOptions={{
        headerStyle: { backgroundColor: '#3498db' },
        headerTintColor: 'white',
        headerTitleStyle: { fontWeight: 'bold' },
    }}
>
    <Stack.Screen name="Home" component={HomeScreen}
        options={{ title: 'Home', headerShown: true }} />
    <Stack.Screen name="Dettaglio" component={DettaglioScreen}
        options={{ title: 'Dettaglio' }} />
</Stack.Navigator>

---

5. Tabella riassuntiva

Hook/API	Codice	Uso
Navigator	createNativeStackNavigator()	Crea stack
Navigate	navigation.navigate('Screen', {params})	Vai a schermata
Params	route.params	Leggi parametri
Back	navigation.goBack()	Torna indietro

---

6. Esercizio

🎯 “Elenco → Dettaglio”

Crea un’app con:

1. Schermata Home: FlatList di film (titolo + anno)
2. Schermata Dettaglio: titolo grande, anno, descrizione
3. Stack navigation con passaggio parametri
4. Header colorato
5. Clicca su film → naviga al dettaglio

type Film = { id: number; titolo: string; anno: number; desc: string };