Side Menu – Side Drawer Navigation ( Yan Menu )

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.

Side Navigation

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.

Basit Sayfa

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.

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.

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.

Teşekkürler.