React Native
Drawer items
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").
Örnek çözümü göster
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.
Kendini test et
-
Kavramı rolüne eşle
- title
- Etiket belirler
- drawerLabel
- Yalnız menü etiketi
- drawerIcon
- Menü ikonu
- options
- Özelleştirme
-
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
- Rengi değiştirmek için
Cevabı göster
Yalnızca Drawer menüsündeki etiketi değiştirmek için — drawerLabel yalnızca Drawer menüsündeki etiketi değiştirir.
-
Menü etiketini ayarla
options={{ title: "____", drawerIcon: ... }}
Cevabı göster
options={{ title: "Ana Sayfa", drawerIcon: ... }}
Sıradaki ders: Drawer toggle
