react native flatlist – Ali Kömesöğütlü

import React, {Component} from 'react';
import {FlatList, StyleSheet, Text, View,Alert} from 'react-native';
export default class App extends Component {  
  constructor(props)
  {
      super(props);
    this.state={
      data:'',
    };
  }
  componentDidMount()
  {
    let request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }
    
      if (request.status === 200) {//http OK mesajı
        
        let XMLParser = require('react-xml-parser');
        let xml = new XMLParser().parseFromString(request.responseText);// text'i xml,json tarzına çeviriyor
            this.setState({data:xml.getElementsByTagName('Currency')});//currency taglarını çekiyorum
       
      } else {
        Alert.alert('Uyarı','İnternet Bağlantınızı Kontrol ediniz.');
      }
    };
    
    request.open('GET', 'https://www.tcmb.gov.tr/kurlar/today.xml',true);
    request.send();
     
}
render_item({item})
{
  return(
    <View style={styles.column_view_style} >
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.attributes.Kod}</Text>
    </View>
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.children[1].value}</Text>
    </View>
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.children[3].value}</Text>
    </View>
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.children[4].value}</Text>
    </View>
    </View>
    
  );
}
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.column_view_style}>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'Kod'}</Text>
        </View>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'İsim'}</Text>
        </View>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'Alış'}</Text>
        </View>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'Satış'}</Text>
        </View>
        </View>
        <View style={{flex:9}}>
        <FlatList 
         data={this.state.data}
         extraData={this.state}
         renderItem={this.render_item}
         keyExtractor={(item)=>item.attributes.Kod}></FlatList>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
  },
  column_view_style:{
   flex:1,
   flexDirection:'row',
    
  },
  column_text_style:{
  textAlign:'center',
  textAlignVertical:'center',
   color:'black',
   width:'100%',
   height:'100%',
   fontSize:20
  },
  row_text_style:{
    textAlign:'center',
    textAlignVertical:'center',
     color:'black',
     width:'100%',
     height:'100%',
    }
});

JavaScript asekron programlama olduğu için Promise yapısını kullandım Tamamını indir

import SQLite from 'react-native-sqlite-storage';

 class Database{

constructor()
{
   
    this.createtable();    
}
createtable()
{

    return new Promise((resolve,reject)=>{
        this.baglan();
        this.baglanti.transaction((tx) => {
            tx.executeSql("select name FROM sqlite_master WHERE type=? AND name=?", ['table','kisiler'],(tx,results)=>{
            
          if(results.rows.item(0)===undefined)
           {     
              tx.executeSql('CREATE TABLE  kisiler(id INTEGER PRIMARY KEY autoincrement NOT NULL, ad text not null,yas integer not null)', []);   
           }
    });    
        });
        this.kapat();
    });
}
success()
{

}
error(err)
{

}
baglan()
{
this.baglanti=SQLite.openDatabase({name: 'kisi.db', location: 'default'},this.success,this.error);       
}
kapat()
{
    return new Promise((resolve,reject)=>{
        this.baglanti=null;
       });    
}
insert(values)
{
   return new Promise((resolve,reject)=>{
    this.baglan();
    this.baglanti.transaction((tx) => {
        tx.executeSql('insert into kisiler (ad,yas) VALUES (?,?)',values);   
      });
   this.kapat();

   });    
}
update(values)
{

    this.baglan();
        this.baglanti.transaction((tx) => {
            tx.executeSql('update kisiler set ad=?,yas=? where id=?',values);
            
          });
       this.kapat(); 

}
delete(values)
{
 return new Promise((resolve,reject)=> 
 {
     this.baglan();
    this.baglanti.transaction((tx) => {
        tx.executeSql('delete from kisiler where id=?',values);
      });
   this.kapat(); 
});

}
get_data()
{
    return new Promise((resolve)=>{

        this.baglan();
        this.baglanti.transaction((tx) => {
            tx.executeSql('select * from kisiler', [], (tx, results) => {
                         
              let array=[];
              for(let i=0;i<results.rows.length;i++)
              {
                array[i]={ad:results.rows.item(i).ad,yas:results.rows.item(i).yas,id:results.rows.item(i).id}
              }
              this.kapat();
            resolve(array);//gönderdiğimizde then ile yakalıyoruz                            
          });
        });
      
    });
}

}
export default Database;

Ali Kömesöğütlü

Etiket: react native flatlist

React Native Döviz Uygulaması

React Native Sqlite Kullanım