Drawer navigator
- React Native kursu
- Orta seviye
- Ders 53/116
- 5 dk
Drawer navigator öğrenirsin.
Drawer navigator nedir?
Drawer navigator, ekranın yanından açılan bir menü sunar. Kullanıcı hamburger ikonuna dokununca menü yandan kayar; menüden bir öğe seçince ilgili ekrana geçer. Gmail, YouTube gibi uygulamalar bu deseni kullanır.
React Navigation kütüphanesi, Drawer'ı createDrawerNavigator ile sağlar. Bir Drawer.Navigator bileşeni içinde her ekran için bir Drawer.Screen yazarsın. Menü ögeleri, Drawer.Screen'lerin sırasına göre listelenir. Bu desen, çok sayıda ana bölümü olan uygulamalar için uygundur: ana sayfa, ayarlar, profil, hakkında gibi. Drawer, ekranda yer kaplamaz; kullanıcı yalnızca gerektiğinde açar. Bu yüzden alt sekmeden daha çok öğe sığar. Drawer ve Bottom Tabs birlikte de kullanılabilir; bu, sonraki derslerde göreceğimiz iç içe navigasyondur.
Uygulama createDrawerNavigator çağır
Bir Drawer nesnesi oluştur. createDrawerNavigator'ı @react-navigation/drawer'dan içe aktar ve çağırıp sonucu Drawer'a ata.
Başlangıç kodu
// yan menü navigatorunu @react-navigation/drawer'dan içe aktar
// Drawer değişkenine navigator üreten fonksiyonun çağrısını ataÖrnek çözüm
import { createDrawerNavigator } from "@react-navigation/drawer";
const Drawer = createDrawerNavigator();Ekran ve menü
Her ekran bir Drawer.Screen ile tanımlanır. İki zorunlu prop'u vardır: name (ekran adı, aynı zamanda menü etiketi) ve component (o öge seçilince gösterilecek bileşen). Örnek: <Drawer.Screen name="Home" component={HomeScreen} />.
name prop'u hem menü etiketinde hem navigasyon referansında kullanılır. component ise o ekran için render edilecek React bileşenidir. Birden çok Drawer.Screen eklersen hepsi Drawer.Navigator içinde sırayla görünür. Drawer varsayılan olarak soldan açılır; drawerPosition prop'u ile sağa da alınabilir. Menü ögelerinin sırası, Drawer.Screen'lerin yazım sırasına bağlıdır. Bu yapı, çok bölümlü bir uygulamanın temelini oluşturur.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Drawer navigator hangi amaçla kullanılır?
<Drawer.Navigator>...</Drawer.Navigator>- Çok sayıda ana bölümü yönetmek için Doğru cevap
- Skor hesaplamak için
- API çağrısı yapmak için
- Form doğrulamak için
Açıklama: Drawer çok sayıda ana bölümü yönetmek için kullanılır.
2 Navigator bileşenini yaz
<____>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator><Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>Açıklama: Drawer.Navigator Drawer kapsayıcısıdır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Drawer |
Yan menü |
Drawer.Navigator |
Ekran kapsayıcısı |
Drawer.Screen |
Tek ekran |
createDrawerNavigator |
Tab nesnesini üretir |