React Native – FlatList

FlatList react native de bir liste tipidir. Ekranda görünmeyen elemanlarını render etmez ve hafıza kullanımını düşürür.
Genel olarak kullanımı aşağıdaki gibidir.

import React, {Component} from 'react';
import {StyleSheet, View, Text, FlatList, Image, TouchableOpacity, TextInput} from 'react-native';
import axios from 'axios';
export default class FlatListExample extends Component {

state = {
    text: '',
    contacts: []
};

componentDidMount() {
    this.getContacts();
}

getContacts = async () => {
    const { data: { results: contacts } } = await axios.get('https://randomuser.me/api/?results=30');
    this.setState({
        contacts,
    });
    console.log(contacts);
};

renderHeader = () => {
    const {text} = this.state;
    return (
        <View style={styles.searchContainer}>
            <TextInput
                onChangeText={text => {
                    this.setState({
                        text,
                    });

                    this.searchFilter(text);
                }}
                value={text}
                placeholder="Search..."
                style={styles.searchInput}/>
        </View>
    )
};
render() {
    return (
        <FlatList
            ListHeaderComponent={this.renderHeader()} // Bu kısımda Liste header'ı render eden fonksiyon çağrılıyor
            renderItem={this.renderContactsItem} // Bu kısım her liste elemanını render edecek fonksiyon çağrılıyor
            keyExtractor={item => item.login.uuid} // Bu kısım her elemana uniq bir id vermek için kullanılıyor
            data={this.state.contacts} //Burada kullanacağımız datayı tanımlıyoruz
/>
    );
}


}

Bazı özelliklerine deyinelim :

render() {
        return (
<FlatList
             item.login.uuid} // Bu kısım her elemana uniq bir id vermek için
                data={this.state.items} // Listenin içine render edilmesi istediğimizi dataset

                onEndReached={this.loadNew} // Bu kısım listenin en sonuna geldiğimizde bir fonksiyon çalıştırmak için 
                onEndReachedThreshold={0} // Bu kısım yukarıda çağrılan fonksiyonun listenin sonuna ne kadar yaklaştığımızda çalışacağı değeri girmek için Örn : 0 en sona geldiğinde çalış. Değer arttıkça sona yaklaşmaya "x" kadar kaldığında çalış anlamına gelir.
                onMomentumScrollBegin={() => { this.duringMomentum = false }} // Bu kısımda listenin sonuna gelip listeyi yukarı doğru ittirmeye zorladığımızda bir fonksiyon çalıştırmak için kullanılır
            />
        );
    }