React Native
Özet - Drawer navigasyonu
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").
Ö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 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.
Örnek çözümü göster
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>
);
}
Kendini test et
-
Bir Drawer.Screen'de ikon eklemek için hangi options alanı kullanılır?
<Drawer.Screen options={{ /* ... */ }} />
- tabBarIcon
- drawerIcon
- icon
- menuIcon
Cevabı göster
drawerIcon — drawerIcon Drawer menüsündeki öğenin ikonunu belirler.
-
Drawer'ı aç/kapa
navigation.____();
Cevabı göster
navigation.toggleDrawer();
-
Kavramı rolüne eşle
- Drawer
- Yan menü
- drawerIcon
- Öğe ikonu
- toggleDrawer
- Açar/kapatır
- useNavigation
- Navigasyon nesnesi
Sıradaki ders: Mount
