Modern mobil uygulamalar çoğu zaman karşımıza tek bir ekran modeli ile çıkar. Ekranları sekmelere bölmek bu model için en çok başvurulan yöntemlerden bir tanesidir. Bu yazımızda React Navigation ile “Tab Navigator” kurulumuna ve kullanımına bakacağız.
Drawer Navigator; genellikle birden fazla, birbirleri ile ilişkisi olmayan hedefler arasında hızlıca ve kolayca geçişler yapmamızı sağlayan navigator çeşididir. Ekranımızda kalıcı olarak veya bir menü ikonu simgesiyle ulaşılıp kontrol edilebilir. Bu yazıda React Navigation altında gelen DrawerNavigator kütüphanesinin kurulumunu yapıp inceleyeceğiz.
Bir web sayfasında “a” elementi sayesinde herhangi bir URL’ye tıkladığımızda başka bir sayfaya yönlendirilip geçiş yapabiliriz. Tıkladığımız URL bilgisi tarayıcının geçmiş yığınına eklenir. Biz geri butonu ile yeniden o sayfaya ulaşmak istediğimizde tarayıcı bu yığın üzerinden URL’ye ulaşır ve bizi tekrar geldiğimiz sayfaya yönlendirir. React Native tarafında web tarayıcılarında olduğu gibi bir geçmiş yığını söz konusu değildir. React Navigation’ın devreye girdiği kısım ise burasıdır. En sık kullanacağımız navigatorlerden biri olan Stack Navigator sayesinde uygulamamızdaki ekranlar arasında geçiş yapabilecek ve geçmiş sayfa yönetimini sağlayabileceğiz.
Mobil uygulamalarımızı geliştirirken bir süre sonra, birden fazla sayfa sunumuna ihtiyaç duyacağımızı göreceğiz. Buradaki en kritik detaylardan birisi de sayfalar arası geçişleri yönetmek olacaktır. Bu yazımızda bir uygulamadaki sayfa yapılarını oluşturmamızda ve yönetmemizde bizlere çok büyük kolaylık sağlayan React Navigation kütüphanesinin kurulumundan ve detaylarından bahsedeceğiz.
Şimdiye kadar verilerimizi oluşturduğumuz veri dizinlerinden export ederek elde ettik. Uygulamalarımızda çoğu zaman verilerimizi bir internal veya external API’lere çağrıda bulunarak elde etmemiz gerekecek. Bunu native olan Fetch fonksiyonu ile de yapabiliriz fakat biz bu bölümümüzde web servis isteklerinde çoğu zaman kullanılan “axios” modülünü import ederek kullanacağız.
Axios, promise tabanlı ve ayrıca bizlere async-await yapısını da kullanabilme olanağı sunan bir HTTP istemcisidir.
React Native uygulamalarımızda listeleme veya sıralama işlemi yapılacağı zaman akla ilk gelen ve kullanılan bileşen FlatList’tir. FlatList diğer bir tercih olan ListView’e göre daha hızlı ve performanslı çalışması nedediyle tercih sebebi olmuştur. Bu yazımızda FlatList kullanımını inceleyeceğiz.
Bu yazımızda React Native tarafında “Event” kavramı yani olay yönetimi nasıl gerçekleştiriliyor, ardından da “State” kavramı ve kullanımına değineceğiz.
Bildiğimiz üzere “Event” HTML tarafında elementlerde gerçekleşen durumlardır. Bu olaylar kullanıcı yani bizler tarafından tetikleneceği gibi tarayıcı tarafından da tetiklenebilir. Butona tıklanılması durumda gerçekleşen onclick, elementlerde değişiklik olduğunda gerçekleşen onchange, klavyeden herhangi bir tuşa basılması durumunda gerçekleşen onkeydown bu olaylara başlıca örnek olarak verilebilir.
“Props” kavramı tahmin edileceği üzere “Property” (Özellik) kelimesinin kısaltılmasından meydana gelir. Bizler oluşturduğumuz bileşenlere bir özellik kazandırmak istediğimizde, bu propslar aracılığı ile inputlar girerek belirtilen değerlerin render edilebilmesini sağlayabiliriz.
Bizler Component kavramı sayesinde kendi özel sınıflarımızı oluşturup bunları istedğimiz zaman çağırıp render edebiliyorduk. Şimdi de oluşturduğumuz bu bileşenlere özellik atamalarının nasıl olduğunu göreceğiz.
Türkçe karşılığı “bileşen” olan “component” React ailesinin en temel yapı taşıdır. Component özünde bir Javascript sınıfıdır ve bizim isteklerimiz ve girdilerimiz sonucunda bizlere UI’ın (Kullanıcı Arayüzü) nasıl ve ne şekilde gözükmesini açıklayan bir React ögesi döndürür. Componentlar bizlere asıl olarak bir işlevi veya ögeyi döndürmesi için yazılan bir kodun; farklı zamanda ve farklı yerlerde yeniden çağırılarak kod kalabalığından kaçınma olanağı, kolaylık ve işlevsellik sağlar.
Component mantığını daha iyi anlamak açısından basitçe; işlevi “h1” etiketi içerisinde bir metin ifadesi döndüren fonksiyonel bir component ifadesi yazalım:
Update your browser to view this website correctly. Update my browser now