React Native |Flatlist Kullanımı (Bölüm 1)

React Native’de Flatlist nedir aslında IOS platformunda aşina olduğumuz tableview yapısı ile benzer özelliklere sahip.Verileri düzgün bir şekilde listeme için kullanılır.

Öncelikle Flatlist çok gelişmiş özellikleri ve yapıları kullanmak için tasarlandığı bu bölümde sizlere sadece temel özelliklerden bahsetmek istiyorum..Bir Flatlist yapısı kurmamız için gerekli 3 şey var .

Öncelikle verilerimizin nereden geleceği belli olmalı ve verilere biz data diyoruz.Bir de renderItem diye bir kavram var.Bu da gelen datamızın ekranda ne şekilde görünmesini sağlayan temel bileşen.Bir de kafa karıştırıcı olan keyExtractor özelliğimiz var bu da data yapımızın içinde her bir verinin kendine ait olan bir id’ye sahip olması gerektiğini belirtiyor.Bu id yi tanımlamak için kullanılır.Veri yapımızda keyExtractor gibi bir id olmasına gerek yok aslında bu olmadan da verileri yazabiliriz lakin yazılı olmayan bazı kurallar vardır (Örnek çimlere basmamak 🙂 ) Aslında her bir verinin kendine ait bir id anahtarı olması her zaman doğru olandır :

Flatlist kullanıcağımız zaman elbette json formatın’da veri tabi ki de işin içinde olucaktır.Biz bu örnekte json yapsına sahip bir veri yapısından istediğimiz verileri ekrana basıcaz.

Öncelikle data yapımı hazırlıyorum:

Tanımlamaya Başlayalım:

  • Tanımladığım datalarımı data özelliğine atadım.
  • Ardından isteğe bağlı olarak KeyExtractor kullandım ve data yapımın için de ki id kısmın key olarak kabul ettiğimi yazdım.
  • renderItem ile ekrana bir text basacağımı ve veri yapımın içinde ki name alanını işaret ederek tüm araba modellerini çekmiş oldum.




Style kısmı ise şimdilik bu şekilde:

Leave a Reply

*