ListView nedir?
ListView – Dikey olarak kaydırılabilen bir veri listesini verimli bir şekilde görüntüleyen bir çekirdek bileşen. Kullanmanın en temel yolu, bir ListView.DataSource veri kaynağı oluşturmak, daha sonra normal bir veri dizisi iletmek, ardından bir ListView bileşenini başlatmak ve renderRow geri çağırma işlevini tanımlamak için veri kaynağını kullanmaktır. Parametre olarak her veri rende edilebilir bir bileşen döndürür (liste görünümünün her bir satırı gibi)
Basitçe söylemek gerekirse, Android’deki ListView’a, iOS’taki UITableView’a benzer şekilde liste görünümünü görüntülemek için kullanılan bir liste bileşenidir. Bir liste bileşeni olarak, ListView çok yaygındır. Resmi belgelerin ListView’in süresinin dolduğunu göstermesine rağmen, ListView yerine FlatList ve SectionList belirtilmesi kullanılmış, ancak bu kontrolün anlaşılmasını derinleştirmenin gerekli olduğunu düşünüyorum, birçok durumda ListView kullanmak uygun olur.
ListView ile ilgili özellikler
Burada sadece normalde bunları açıklamak için kullanacağım daha önemli nitelikleri listeliyorum, diğer dokümanları resmi belgelerde bulabilirsiniz.
dataSource – Liste veri kaynağını ayarlamak için kullanılan ListView.DataSource örneği
renderRow – listedeki her satırı işlemek için kullanılan yöntem, yöntemin dört parametresi vardır (rowData, sectionID, rowID, highlightRow), parametreleri geçirerek her satırın verilerini ayarlayabilir, farklı bölümler ve satırlar arasında ayrım yapabilirsiniz. Dört parametre, veri kaynağındaki bir veri parçasını, grubun kimliğini, satırın kimliğini ve bayrağın vurgulanıp vurgulanmadığını gösterir.
DataSource ve renderRow özellikleriyle bir ListView görünümünü tamamlayabiliriz.Bu iki özellik ListView’un en temel özellikleridir ve ayarlanması gerekir.
renderHeader – başlık görünümünü oluşturur.Örnek olarak iOS alın UITableView, başlık görünümüne ayarlanabilen bir tableHeaderView özelliğine sahiptir. Burada renderHeader özel bir başlık görünümü de oluşturabilir.
renderFooter – Bir kuyruk görünümüne ayarlanabilen UITableView bileşeninin tableFooterView öğesine benzer şekilde alt görünümü oluşturur.
renderSectionHeader – Her bölüm için, UITableView’daki sectionHeader görünümüne benzer bir yapışkan kafa görünümü oluşturur.
stickySectionHeadersEnabled – sectionHeader’ın yapışkan yapıp yapamadığı, gerçekte ListView’in geçerli bölümün üstünü destekleyip desteklemediği olup, kaydırırken yukarıda durmaktadır. Bu efekt, UITableView’daki düz stilin SectionHeader ile aynıdır.
renderSeparator – her satırın bölme çizgisini oluşturur.Genellikle bunu yapmaya alışkın değilim.Bir satır görünümünün en altına doğrudan renderRow’da bir genişlik ayarlayabilir ve bölme çizgisini uygulamak için borderBottomWidth ve borderColor öğesini kullanabilirsiniz.
onEndReached – Tüm veriler işlendiğinde ve liste, enEndReachedThreshold piksellerinden daha düşük olan bir mesafeye kaydırıldığında çağrılır. Bu yöntem, liste için çekme yükünü kullandığımızda kullanılır.
onEndReachedThreshold – Bu özellik, liste bu değerden daha kısa bir mesafeye kaydırıldığında onEndReached’daki yöntemi tetikleyecek olan ListView’deki sayısal bir değerdir.FlatList ve SectionList’te bu değer 0 ile 1 arasındadır. Açık bir şekilde ayırt edilmesi gerekir.
ListView kullanımı
Bu makalede, temel olarak ListView’ün günlük kullanımını kapsayan üç farklı liste görünümü uygulamak için ListView kullanıyoruz.
İlk, basit liste görünümü uygulaması
Şekilde gösterildiği gibi, böyle bir listeyi uygulamak için sadece veri kaynağı dataSource ve renderRow’u ayarlamamız gerekir.
DataSource kullanırken, önce yeni bir dataSource nesnesi oluşturmamız gerekir.Bireysel bölümlerin listesi için, veri kaynağını oluşturmak için rowHasChanged (prevRowData, nextRowData) ve cloneWithRows (dataBlob, rowIdentities) kullanın.
Her görünüm satırı için görüntüyü göstermek için bir görüntü bileşenine, metni görüntülemek için bir Metin bileşenine, görüntüyü ve metni sarmak için bir coverableOpacity bileşenine ve bunun için bir click olayına renderRow tamamlandı.
Kod aşağıdaki gibidir:
constructor(props) { super(props); let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); this.state = { dataSource: ds.cloneWithRows(data) } } render () { return ( <View style={styles.container}> <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} /> </View> ) } _renderRow = (rowData) => { return ( <TouchableOpacity style={styles.cellContainer} onPress={() => {}}> <Image source ={rowData.image} style={styles.image}/> <Text style={styles.title}>{rowData.title}</Text> </TouchableOpacity> ) } 复制代码
Verilerin resimler ve unvan içeren bir dizi olduğu yer Veri kaynağını ayarlayarak ve satır görünümünü görüntüleyerek basit bir liste elde ederiz.
İkincisi, ızgara biçiminde bir liste
Böyle bir Izgara Düzeni görünümü uygulamak için, çok basittir, sadece yukarıdaki kodu değiştirmeniz gerekir. ListView içeriğinin stilini yatay mizanpaja (flexDireaction: ‘row’) değiştirin, ardından satır sonlarını (flexWrap: ‘wrap’) destekleyin, renderRow’da oluşturulan öğeler yatay olarak düzenlenir, tüm öğeler bir satırda gösterilmezse otomatik olarak sarılır.
ListView ScrollView’dan devralınır, bu yüzden burada içerik stilini ayarlayabiliriz, stil yerine contentContainerStyle’a dikkat ederiz.
Daha sonra renderRow’da görüntünün, metnin ve kabın tarzını ayarlayın, bir GridLayout listesi tamamlandı.
Üçüncüsü, tek sütunların ve ızgara stillerinin bir listesini içeren gruplanmış görünüm
Diyelim ki böyle bir listemiz var, birkaç bölüm var ve her bölümdeki satır görüntüleme stilleri farklı, bazıları tek sütunlar, bazıları ise ızgara şeklindedir. Şu anda, ListView’in GridLayout gibi içerik stilini değiştiremiyoruz, çünkü ListView’ün içerik stilindeki tüm unsurlar etkileniyor ya da hepsi dikey olarak gösteriliyor ya da hepsi yatay olarak gösteriliyor, bu da istediğimiz efekti elde etmiyor. . Bunu yapmanın iki yolu vardır:
- Izgara elemanının bölümü için bu bölüm veri kaynağını sadece bir veri içeren bir diziye ayarladık, tüm alt elemanları sarmak için renderRow’da bir Görünüm kullanın ve ızgaradaki alt öğeler arasında dolaşmak için dizinin harita yöntemini kullanın. Görünümün içerik stili, GridLayout gibi yatay olarak görüntülenir ve sonra kaydırılır. Gruplandırılmış ListView veri kaynağının biçimiSectionID_2’nin gruplandırılması, ızgara görünümünü görüntülemek için kullanılır.
- GridLayout ile aynı şekilde, ızgara öğesinin görüntüleneceği bölüme bir ListView ekleyin.
- https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter1-ListView
kaynak