RN Lez 27: Drawer e Navigator Compositi

Docs: Navigation

Obiettivi

• Creare Drawer navigator
• Combinare Stack + Tab + Drawer
• Scegliere il navigatore giusto

---

1. Drawer Navigator

npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

import { createDrawerNavigator } from '@react-navigation/drawer';
import { Ionicons } from '@expo/vector-icons';

type DrawerParamList = {
    Home: undefined;
    Impostazioni: undefined;
    Aiuto: undefined;
};

const Drawer = createDrawerNavigator<DrawerParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Drawer.Navigator
                screenOptions={{
                    drawerActiveTintColor: '#3498db',
                    drawerInactiveTintColor: '#555',
                    drawerStyle: { backgroundColor: 'white', width: 280 },
                }}
            >
                <Drawer.Screen name="Home" component={HomeScreen}
                    options={{ title: 'Home', drawerIcon: ({ color }) => <Ionicons name="home" size={24} color={color} /> }}
                />
                <Drawer.Screen name="Impostazioni" component={ImpostazioniScreen}
                    options={{ title: 'Impostazioni', drawerIcon: ({ color }) => <Ionicons name="settings" size={24} color={color} /> }}
                />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

---

2. Pattern: navigation.navigate tra navigatori diversi

// Da uno schermo dentro Drawer:
const navigation = useNavigation<any>();
navigation.navigate('Home');           // va al tab Home
navigation.navigate('Impostazioni');   // apre schermata Drawer

// Apri/chiudi Drawer:
navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();

---

3. Scegliere il navigatore giusto

Navigatore	Quando usarlo	Esempio
Stack	Sequenza avanti/indietro	Lista → Dettaglio
Tab	Sezioni principali in basso	Home, Cerca, Profilo
Drawer	Menu laterale ricco	Impostazioni, Aiuto, Info

---

4. Pattern: Tab + Stack (standard)

Tab Navigator (in basso)
├── Home (Stack)
│   ├── Feed
│   └── PostDettaglio
├── Cerca (Stack)
│   ├── Ricerca
│   └── Risultati
└── Profilo (Stack)
    ├── Vista
    └── Modifica

// Tab Navigator
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Cerca" component={CercaStackScreen} />
<Tab.Screen name="Profilo" component={ProfiloStackScreen} />

---

5. Tabella riassuntiva

Navigatore	Pacchetto
Stack	@react-navigation/native-stack
Bottom Tab	@react-navigation/bottom-tabs
Drawer	@react-navigation/drawer

---

6. Esercizio

🎯 “App con Drawer + Tab + Stack”

Crea un’app con:

1. Drawer esterno con: Home, Impostazioni, Info
2. Tab dentro Home: 3 tab
3. Stack dentro ogni tab
4. Icone per ogni voce Drawer