05.04.01. FlatList Örneği: JSON veriyi işleme

Bu bölümde internet üzerinden üretilmiş bir JSON dosyayı alıp, FlatList içinde göstereceğim.

İnternetten hazır JSON üretici için “https://randomuser.me/api/” API’sini kullandım. Bu API, JSON formatında rastgele kullanıcılar üretiyor ve hatta resim link bilgisi var. Ayrıca, ad ve e-mail bilgisi içeriyor. Buradan verileri indirip FlatList içinde göstereceğim.

import React, { Component } from 'react';
import {Text, View, FlatList, Image } from 'react-native';

export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [], page: 1, seed: 1, error: null
      };      
    }

    componentDidMount(){
        this.makeRemoteRequest();
    }
  
    makeRemoteRequest = () => {
      const { page, seed } = this.state;
      const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
      fetch(url)
        .then(res => res.json())
        .then(res => {
          this.setState({
            data: page === 1 ? res.results : [...this.state.data, ...res.results],
            error: res.error || null
          });
        })
        .catch(error => {
          this.setState({ error });
        });
    };

    render() {
      return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <FlatList 
        data={this.state.data}
        renderItem={({item}) =>
          <View>
          <Image
          style={{width: 50, height: 50}}
          source={{uri: item.picture.thumbnail}}/>
            <Text>{`${item.name.first} ${item.name.last}`}</Text>
            <Text>{item.email}</Text>
          </View>}
        keyExtractor={item => item.email}
        />
        
        </View>
      );
    }  
  }

import React, { Component } from 'react';

import {Text, View, FlatList, Image } from 'react-native';

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

data: [], page: 1, seed: 1, error: null

};

}

componentDidMount(){

this.makeRemoteRequest();

}

makeRemoteRequest = () => {

const { page, seed } = this.state;

const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;

fetch(url)

.then(res => res.json())

.then(res => {

this.setState({

data: page === 1 ? res.results : [...this.state.data, ...res.results],

error: res.error || null

});

})

.catch(error => {

this.setState({ error });

});

};

render() {

return (

<FlatList

data={this.state.data}

renderItem={({item}) =>

<View>

<Image

style={{width: 50, height: 50}}

source={{uri: item.picture.thumbnail}}/>

<Text>{`${item.name.first} ${item.name.last}`}</Text>

<Text>{item.email}</Text>

</View>}

keyExtractor={item => item.email}

</View>

);

}

componentDidMount() metodu Mount işlemi olduktan sonra çalışır. (Yeni versiyonlarda unsafe olarak açıklanıyor, ancak bir AJAX isteği yapmak içinde çok sık şekilde kullanılıyor. Gelecekte buraya bir güncelleme yapabilirim.) Ardından makeRemoteRequest fonksyionu fetch komutu ile linkten verileri çekiyor, çekme işlemi bitince “res => res.json()” ile sonuçlar alınıyor ve son aşamada state bilgisi güncelleniyor. catch ise bir hata olduğunda çalışıyor ve state bilgisini güncelliyor. render bölümünde elde edilen veriler gösteriliyor. Bu veriler JSON formatında ve bir dizi şeklindedir. Bu dizinin her öğresi bir item’dır. FlatList içinde her öğe için gösterilecek bilgiler renderItem’a uygun olarak düzenleniyor. (Verilere nasıl ulaşıldığını daha iyi anlamak için JSON dosyayı inceleyin.)

Bu örneğin daha gelişmiş versiyonunu için tıklayın.