React Native |Flatlist Kullanımı (Bölüm 2)

Yeni bir flatlist örneğinde tekrar beraberiz bu sefer elimizde bulunana data üzerinde başlık açıklama ve görsel datayı flatlist üzerinde ekrana basacağız.

Öncelikle DATA tanımlayalım:

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
    logoimage:'https://logo-logos.com/wp-content/uploads/2016/10/Sony_logo.png',
    isim:'Sony',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
    logoimage: 'https://marka-logo.com/wp-content/uploads/2020/04/Apple-Logo.png',
    isim:'Apple',

  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
    logoimage: 'https://marka-logo.com/wp-content/uploads/2020/09/Nokia-Logo-675x380.png',
    isim:'Nokia',

  },

Data yapımız’da id,title ,logoimage, ve isim mevcut.

Ardından bir const tanımladım.

  • 3 adet Paremetre almasını istediğim için title,isim,mylogo adında tanımlamaları yaptım.
  • Flatlist üzerinde her bir item’in yani her bir data’mın içini tasarlıyorum şimdi.
  • Her bir item aslında bir view içinde tasarlandı .Yani view için de 3 adet companent olucak .
  • image ve text tanımlamalarını yaptım
  • Ardından 3 adet render edeceğim itemleri tanımlıyorum.
  • Şimdi burada bir flatlist oluşturuyorum.

Şimdi de tasarım kısmına bakalım:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    flexDirection:'row',
    backgroundColor: '#FF6700',
    height: 100,
    marginLeft:15,
    marginRight:15,
    marginTop:10,
    borderRadius:20,
  },
  myimage:{
    marginTop: 25,
    marginLeft: 10,
    backgroundColor: 'white',
   width:50,
   height:50,
   borderRadius:25,
  },
  isimStyle:{
   marginTop:50,
    marginLeft:40,
    color:'white',

    fontWeight:'bold',
    fontSize:18,
   // marginBottom:20,
  },
  title: {
    color: 'white',
    marginTop:20,
    marginLeft:20,
    fontSize: 20,
    fontWeight:'bold',



  },

});

export default App;

Projeyi derleyelim ve bu şekilde:

Leave a Reply

*