Side Menu - Side Drawer Navigation ( Yan Menu ) - MOBİL KOD AKADEMİ
Her geçen gün hızla artan mobil uygulamalarda görsellik çok daha fazla önem kazanmaya devam etmektedir. Bu durum uygulamalardaki her bileşeni daha farklı ve güzel oluşturma gereksinimi meydana getirmiştir.
Uygulamalarda kullanılan menüler artık kaydırmalı olarak kesinkes yapılmaktadır. Bu yazıda biz de side menu nasıl yapılır basitçe onu anlatacağız.
React Native ile side navigation yapabilmek için react nativation kütüphanesini kullanacağız. React Navigation kütüphanesinden Side Menu için DrawerNavigator, sayfalar arası geçiş için createStackNavigator kullanacağız.
Sidemenu.js ( Kaydırılan Menu Dosyası )
Yan menüyü normal bir sayfa oluşturur gibi yapacağız. Bunun için örnek olması amacıyla alttaki gibi bir sayfa yapalım.
Side Menu (Side Navigation)
Test amaçlı bir sayfa oluşturalım. Uygulama açıldığında karşımıza çıkacak olan sayfamız basit bir şey olsun. Alttaki sayfamız da açılış sayfamız.
Ilk Açılış Sayfası
Navigation ( App.js )
React Native ile navigation işlemleri çok planlı ve tatlı bir yapıya sahip. Bu uygulamamızda iki adet navigator kullandık. Bir tanesi Side Menu için DrawerNavigator, diğeri sayfalar arası geçiş için createStackNavigator. Bir dosya içerisinde bu yapıları oluşturalım. Dosyamızın adı App.js olsun.
Burada öncelikle bir Main adında stack oluşturduk. Bunun içerisine de bir sayfayı ekledik. Daha sonra ise Sidemenu.js dosyamızı App.js dosyasına import ettik. export edeceğimiz App yapısının içerisinde uygulama içerisinde kullanacağımız sayfaların olacağı Main stack i ile yan menümüzün olduğu Sidemenu dosyamızı ekledik. Önemli bir ayrıntıyı hatırlatmakta fayda var. App yapımızı DrawerNavigator cinsinden oluşturuyoruz.
Side Menu – Yan Menu – Yandan Kaydırılan Sayfa 🙂
Yandan açılan sayfamızı dilediğimiz gibi değiştirebiliriz. Burada temel nokta navigation planlamasını doğru yapmak. Görüldüğü üzere ufak dokunuş ile oluşturabilmektedir.
android, application, create react native app, drawernavigator, iOS, mobil. uygulama, native, react native, react-native-navigation, react-native-side, tutorial, yan menu, yandan kaydırılan menü
2 thoughts on “Side Menu – Side Drawer Navigation ( Yan Menu )”
Hocam sidebar kategori yi acılır kapanır mobil uyumlu hale getire biliriz
Yeni sayfalar ve güncellemeler gelecek. Böylece React ve React Native hakkında Türkçe kaynak zenginliği oluşturulacak.