React Native Serüveni #48 | Flatlist Columns ve List Empty |
Hepinize merhaba dostlarım :) Ben Muhammed Fatih
"React Native Serüveni" olarak çıktığımız bu yolculukta sizlerle beraber bu güzel günde sizlerle beraber #reactnative teknolojisinden bolca miktarda dozumuzu alıyor ve buna ek olarak vitamin takviyesi de yaparak kendimizi geliştirmeye devam ediyoruz :). Bu sefer çok güzel şeylere değineceğiz
Bu bölümde sizlerle beraber projelerimizde sıklıkla kullandığımız ve neredeyse hem #ui ve #ux için, hem de projemizin işleyişini gözle görülür bir şekilde muhteşem kılmak için liste verilerimizi ızgara sistemi ile ayırmayı gösteriyorum :)
Özellikle büyük markaların mobil uygulamalarını da sıklıkla inceliyorsanız bu tarz bir tasarımların olduğunu, liste verilerinin ızgara sistemi ile listelendiğini açık ve net bir şekilde görebilirsiniz (hepsinde yoktur ama büyük bir çoğunluğunda vardır).
Buna ek olarak ise listelediğimiz dizinin içerisi boş ise bunun uyarısını da kullanıcıya gösterme işlemini yani liste verimizin boş olduğunun uyarısını verdirme işlemine de değiniyoruz. Bunun özellikle kullanıcımız tarafından uygulama hatası şeklinde algılanmamasını veya kullanıcımız uygulama içerisinden kendi verilerini kaldırdığında listenin boş olduğunu, herhangi bir veri tutulmadığını göstermek mobil uygulamamızı kullanan kullanıcıya da güzel bir deneyim olacaktır :)
Bütün bunların ve daha fazlasının nasıl bir şekilde yapıldığını öğrenmek için sizleri videomu izlemeye davet ediyorum dostlarım :).
Bölüm içerisinde yaptığımız işlemlere genel olarak bakacak olursak:
-- #columns ve #empty özelliklerinin hangi durumlarda kullanılacağına değindik
-- Projelerinizde hangi durumlarda kullanabileceğinize değindik
-- "Columns" özelliğini kullandık ve hangi durumlarda desteklenmediğine değindik. Bunu da bir örnekle gösterdik
-- "Empty" özelliğini gerçek hayattaki örneklerle anlatıp bunu da bir örnekle pekiştirdik
şeklinde özetleyebiliriz.
İlk başlarda karmaşık veya zor gelebilir dostlarım anlıyorum. Öğrenme süreci içerisinde bu durumlar son derece doğaldır diyebilirim.
İşte bu aşamada sizlerden istediğim tek şey her videomun sonunda dediğim gibi "İstikrarlı ve azimli olmalısınız, bolca pratik yapmalısınız" şeklinde olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır :)
Şimdiden hepinize iyi çalışmalar iyi seyirler dilerim dostlarım :). Videoyu beğenmeyi, kanalıma abone olmayı ve bildirimleri açmayı, takıldığınız yerlerde yorum yapmayı unutmayın.
FlatList Dökümanı: https://tls.tc/jfC50
Projemizin Kodları: https://github.com/turan1302/react-na...
React + Laravel Eğitimleri için:
WebRTC Projesi: https://tls.tc/04JnR
Alışveriş Sepeti Projesi: https://tls.tc/rzCkV
Chat Sistemi Projesi: https://tls.tc/7ePsd
Radyo Çalar Projesi: https://tls.tc/5HITg
Fast Typing Projesi: https://tls.tc/ZJkfy
Barkod Okuyucu Projesi: https://tls.tc/z07Ap
React Native Eğitimi için:
https://tls.tc/e5mIM
Sitelerim -
MFSoftware Blog: https://mfsoftware.net/
Seyyar Yazılımcı (Yazılımcı Tartışma Platformu): https://seyyaryazilimci.com/
Sosyal Medya Hesaplarım -
Linkedin: / mfsoftware
Instagram: / mfsoftware.net.tr
React Native uygulama geliştirme
FlatList kullanımı React Native
React Native boş liste
FlatList kolon yapısı
Mobil uygulama listeleri
React Native öğe düzenleme
FlatList performance optimization
React Native core components
Managing empty list states
React Native FlatList examples
Content displayed when list empty
How to use FlatList
React Native UI tasarımı
Mobil uygulama geliştirme ipuçları
React Native veri listeleme
FlatList ile listeleme örneği
React Native performans iyileştirme
FlatList bileşeni nedir
React Native project ideas
App development guide
React Native user interface
Managing list items
FlatList example projects
React Native app samples
Liste görünümü React Native
FlatList ile dinamik içerik
React Native ile uygulama yapma
Mobil projeler için React Native
FlatList bileşeni nasıl çalışır
React Native ile liste uygulaması