Drawer items
- React Native kursu
- Orta seviye
- Ders 55/116
- 5 dk
Drawer item'ları ve özelleştirmeyi öğrenirsin.
Drawer öğeleri
Drawer menüsündeki her öğe, bir Drawer.Screen tarafından tanımlanır. Öğenin etiketi name prop'undan gelir. Özelleştirmek için options prop'una title, drawerLabel veya drawerIcon eklersin.
Örnek: <Drawer.Screen name="Home" component={HomeScreen} options={{ title: "Ana Sayfa", drawerIcon: ... }} />. Burada title menüdeki etiketi belirler. drawerLabel da etiketi özelleştirir ama yalnızca Drawer menüsü için geçerlidir; başlık çubuğunu etkilemez. drawerIcon menü öğesinin yanına ikon koyar. Bu özelleştirmeler, menüyü görsel ve anlaşılır kılar. Drawer'da alt başlık (ör. "Hesap", "Uygulama") eklemek de yaygındır; bunu drawerContent ile yaparız. Drawer öğeleri, kullanıcının uygulamada gezinmesinin temel yoludur.
Uygulama Drawer öğelerine ikon ekle
Önceki dersteki gibi createDrawerNavigator'ı içe aktar, Drawer'a ata. Ionicons'u @expo/vector-icons'tan içe aktar. HomeScreen ve SettingsScreen basit bileşenler olsun. App bileşeninde her Drawer.Screen'in options'una drawerIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> ekle (Settings için name="settings").
Başlangıç kodu
// yan menü navigatorunu ve ikon setini içe aktar; Drawer'a ata
// HomeScreen ve SettingsScreen yaz
// App bileşeni yaz; her Drawer.Screen'in options'una ikon çizen alan 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 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="Settings" component={SettingsScreen} options={{ drawerIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} /> }} />
</Drawer.Navigator>
);
}drawerContent ile özel menü
Drawer menüsünü tamamen özelleştirmek için drawerContent prop'u kullanılır. Bu prop, varsayılan menü yerine render edilecek bir bileşen alır. Böylece menüye başlık, kullanıcı bilgisi, alt menü gibi özel bölümler eklersin.
Örnek: <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />}>. Burada CustomDrawer senin yazdığın bir bileşendir; props ile Drawer'dan gelen listedeki öğelere ve navigasyon işlevlerine erişirsin. Bu, profesyonel uygulamalarda sık görülen bir desendir. Drawer menüsünün üstünde kullanıcı adı ve avatar, altında çıkış butonu gibi ek bölümler eklemek için kullanılır. Bu özelleştirme, standart menüden çok daha fazlasını sağlar; markanı yansıtan bir menü ortaya koyar.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
title |
Etiket belirler |
drawerLabel |
Yalnız menü etiketi |
drawerIcon |
Menü ikonu |
options |
Özelleştirme |
2 drawerLabel ne için kullanılır?
options={{ drawerLabel: "Ana Sayfa" }}- Başlık çubuğunu değiştirmek için
- İkon eklemek için
- Yalnızca Drawer menüsündeki etiketi değiştirmek için Doğru cevap
- Rengi değiştirmek için
Açıklama: drawerLabel yalnızca Drawer menüsündeki etiketi değiştirir.
3 Menü etiketini ayarla
options={{ title: "____", drawerIcon: ... }}options={{ title: "Ana Sayfa", drawerIcon: ... }}Açıklama: title: "Ana Sayfa" menü etiketini belirler.