Özet - Drawer navigasyonu
- React Native kursu
- Orta seviye
- Ders 58/116
- 5 dk
Drawer, items ve nested'i birleştirerek bir menülü uygulama yazarsın.
Özet - Drawer navigasyonu
Bu grupta Drawer navigator, createDrawerNavigator, drawer öğeleri, drawer toggle ve iç içe navigasyonu öğrendin. Drawer yandan açılan bir menüdür; her öğe bir Drawer.Screen'dir. drawerIcon ile ikon, drawerLabel ile etiket eklersin.
useNavigation ile navigation.toggleDrawer() menüyü açıp kapatırsın. İç içe navigasyon ile Drawer ve Stack'i bir arada kullanırsın. Şimdi tüm bu parçaları birleştirip menülü bir uygulama yazacaksın. Drawer'da 3 bölüm olacak, her bölümde bir Stack olacak, her bölümün ikonu olacak. Bu, gerçek bir uygulamanın navigasyon omurgasını kurar. Adım adım ilerleyerek tüm öğrendiklerini bir araya getireceksin.
Uygulama 3 bölümlü Drawer uygulaması yaz
Bir App bileşeni yaz. createDrawerNavigator'ı içe aktar, Drawer'a ata. Ionicons'u @expo/vector-icons'tan içe aktar. Üç basit bileşen yaz: HomeScreen, ProfileScreen, SettingsScreen (her biri bir Text döndürsün). App bileşeninde <Drawer.Navigator> içinde üç Drawer.Screen olsun. Her birine options={{ drawerIcon: ({ color, size }) => <Ionicons name="..." color={color} size={size} /> }} ekle (Home: "home", Profile: "person", Settings: "settings").
Başlangıç kodu
// yan menü navigatorunu ve ikon setini içe aktar; Drawer'a ata
// Text'i react-native'den içe aktar
// Home, Profile, Settings ekranlarını yaz
// App bileşeni yaz; üç Drawer.Screen olsun; her birine ikon ekleÖrnek çözüm
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Drawer = createDrawerNavigator();
function HomeScreen() { return <Text>Ana sayfa</Text>; }
function ProfileScreen() { return <Text>Profil</Text>; }
function SettingsScreen() { return <Text>Ayarlar</Text>; }
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Drawer.Screen name="Profile" component={ProfileScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Drawer.Screen name="Settings" component={SettingsScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} /> }} />
</Drawer.Navigator>
);
}Uygulama Drawer'a toggle butonu ekle
Önceki dersteki 3 bölümlü uygulamayı genişlet. HomeScreen içine useNavigation'ı ekle; const navigation = useNavigation();. <Button title="Menü" onPress={() => navigation.toggleDrawer()} /> ekle. useNavigation'ı @react-navigation/native'den içe aktar.
Başlangıç kodu
// Önceki 3 bölümlü uygulamayı yaz
// Navigasyon hook'unu içe aktar
// HomeScreen içine hook çağrısı ve toggle butonu ekleÖrnek çözüm
import { createDrawerNavigator } from "@react-navigation/drawer";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
import { Button, Text } from "react-native";
const Drawer = createDrawerNavigator();
function HomeScreen() {
const navigation = useNavigation();
return (
<>
<Text>Ana sayfa</Text>
<Button title="Menü" onPress={() => navigation.toggleDrawer()} />
</>
);
}
function ProfileScreen() { return <Text>Profil</Text>; }
function SettingsScreen() { return <Text>Ayarlar</Text>; }
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Drawer.Screen name="Profile" component={ProfileScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Drawer.Screen name="Settings" component={SettingsScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} /> }} />
</Drawer.Navigator>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir Drawer.Screen'de ikon eklemek için hangi options alanı kullanılır?
<Drawer.Screen options={{ /* ... */ }} />- tabBarIcon
- drawerIcon Doğru cevap
- icon
- menuIcon
Açıklama: drawerIcon Drawer menüsündeki öğenin ikonunu belirler.
2 Drawer'ı aç/kapa
navigation.____();navigation.toggleDrawer();Açıklama: navigation.toggleDrawer() Drawer'ı açar ya da kapatır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Drawer |
Yan menü |
drawerIcon |
Öğe ikonu |
toggleDrawer |
Açar/kapatır |
useNavigation |
Navigasyon nesnesi |