React Native
Drawer navigator
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.
Örnek çözümü göster
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.
Kendini test et
-
Drawer navigator hangi amaçla kullanılır?
<Drawer.Navigator>...</Drawer.Navigator>
- Çok sayıda ana bölümü yönetmek için
- Skor hesaplamak için
- API çağrısı yapmak için
- Form doğrulamak için
Cevabı göster
Çok sayıda ana bölümü yönetmek için — Drawer çok sayıda ana bölümü yönetmek için kullanılır.
-
Navigator bileşenini yaz
<____>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
Cevabı göster
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
-
Kavramı rolüne eşle
- Drawer
- Yan menü
- Drawer.Navigator
- Ekran kapsayıcısı
- Drawer.Screen
- Tek ekran
- createDrawerNavigator
- Tab nesnesini üretir
Sıradaki ders: createDrawerNavigator
