ScrollView bileşeni tüm değerleri tutar. List View bileşenleri ise sadece belirli görüntülenen değerleri render eder. Bu bileşenler, özellikle büyük verileri göstermede kullanılacak iyi bir çözümdür.
List View bileşenleri olarak bu bölümde FlatList ve SectionList bileşenleri inceleyeceğiz.
Veri tekrarlayan yapıları göstermek için List View bileşenlerin çok kullanışlı yapılardır. Özellikle bir sunucudan JSON bir veri alıp onu kullanıcıya bu yapılarla göstermek için ideal çözümlerdir. Örnekte users üç veriden oluşan bir JSON formatıdır. Bu örnekte bir sunucudan veri almadık ancak bu verileri bir sunucudan almamızda mümkündür.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React, { Component } from 'react'; import {Text, View, FlatList, SectionList, StyleSheet } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { "users": [{ "name": "Proxima Midnight", { "name": "Ebony Maw", { "name": "Black Dwarf", }; } render() { return ( <View style={styles.container} > <Text style={styles.h2text}> Kullanıcılar </Text> <FlatList data={this.state.users} showsVerticalScrollIndicator={false} renderItem={({item}) => <View style={styles.flatview}> <Text style={styles.name}>{item.name}</Text> <Text style={styles.email}>{item.email}</Text> </View> } keyExtractor={item => item.email} /> <SectionList renderItem={({item, index, section}) => <Text key={index}>{item}</Text>} renderSectionHeader={({section: {title}}) => ( <Text style={{fontWeight: 'bold'}}>{title}</Text> )} sections={[ {title: 'Title1', data: ['item1', 'item2']}, {title: 'Title2', data: ['item3', 'item4']}, {title: 'Title3', data: ['item5', 'item6', 'item7', 'item8']}, ]} keyExtractor={(item, index) => item + index} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 50, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, h2text: { marginTop: 10, fontFamily: 'Helvetica', fontSize: 36, fontWeight: 'bold', }, flatview: { justifyContent: 'center', paddingTop: 30, borderRadius: 2, }, name: { fontFamily: 'Verdana', fontSize: 18 }, email: { color: 'red' } }); |
FlatList tekrarlayan bir veri için ideal bir çözümdür. renderItem bölümünde tekrarlayan bölümün nasıl organize edileceği belirtilir. showsVerticalScrollIndicator yanda kaydırma çubuğunun görünüp görünmeyeceğini ayarlar. data ise tekrar eden verileri tutar.
SectionList tekrarlayan verileri bölümlere ayırır. renderItem bir öğenin nasıl gösterileceğini belirlerken renderSectionHeader ise bölüm başlıklarının nasıl gösterileceğini belirler. keyExtractor ise key: value ilişkisini belirler. Burada her öğenin kendine özel/benzersiz bir anahtarı olacağını unutmayın.