حسام رسولیان

آموزش کار با FlatList در React Native

استفاده از لیست برای نمایش اطلاعات مختلف داخل اپلیکیشن یکی از بخش های مهم هست یعنی تقریبا اپلیکیشنی نمیتونید پیدا کنید که نیازی به لیست نداشته باشند.

در React Native ابتدا از کامپوننت Listview استفاده میشد ولی از سال 2017 این کامپوننت منسوخ شده و جای خودش و به دو کامپوننت Flatlist و SectionList داد. در این پست هم من با کامپوننت Flatlist شروع میکنم به ساخت لیست ویو.

فایل جدیدی به اسم  ListFlat ایجاد میکنم و خطوط زیر ایمپورت میکنم.

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

برای نمایش اطلاعات ما نیاز داریم تا اطلاعات خودمون و بصورت آبجکت در یک آرایه ذخیره کنیم. آبجکتی که من میسازم از سه بخش تشکیل شده به اسم های key,name,email دو فیلد اسم و ایمیل که اختیاری هست اسم هاشون ولی key و نمیتونید عوض کنید و محتویات این فیلد حتما باید منحصر به فرد باشه. این آبجکت و داخل state ذخیره میکنم.

class ListFlat extends Component {

constructor(props){

 super(props);

 this.state={

    DataListt : [

     {
         "key":"12",
         "name":"Hesam"
         ,"email":"hhh@yahoo.com"
     },
     {
         "key":"13",
         "name":"Eli"
         ,"email":"atyscode@yahoo.com"

     },
     {
         "key":"14",
         "name":"Ali"
         ,"email":"atyscode@gmail"

     }
     ,
     {
       "key":"12",
       "name":"Hesam"
       ,"email":"hhh@yahoo.com"
   }
 
 ]

  }
 }

FlatList دوتا  props خیلی مهم داره یکی data هست که باید همین آرایه  که تعریف کردیم بهش پاس بدیم و یکی هم

renderItem هست که نحوه نمایش آیتم ها را نشون میده در واقع  renderItem یک کامپوننت جدا میتونه باشه که ما شکل ظاهری ردیف های لیست و طراحی میکنیم همچنین renderItem دوتا پارامتر item,index هم داره.
render() {
      return (

        <View style={{flex:1}}>

          <FlatList 
          data={this.state.DataListt}
          renderItem={({item,index})=>{
            return(
         <ListItem item={item} index={index}></ListItem>

          
             );
          }}
          
          >

          </FlatList>

        </View>
        
      );
   }
}

من برای نحوه نمایش هر ردیف لیست یک کامپوننت جدا به اسم ListItem طراحی کردم و به Flatlist اضافه کردم. کدهایListItem به شکل زیر هست.

class ListItem extends Component {

  actionOnRow(item) {
    console.log('Selected Item :',item);
 }

  render(){
    return(
  
      <View style={{
        flex:1,
        backgroundColor:this.props.index %2 ==0 ? '#fcfcfc': '#64ea7a'
        ,padding:10
      
      
      }}>
  
         <Text style={{fontSize:23,color:'#f7073f'}}
         onPress={
          () =>
          console.log(`index is: ${this.props.index}`)
         }>
         {this.props.item.name}
         </Text>
         <Text>{this.props.item.email}</Text>
      </View>

    );
  }
}

برای هر آیتم هم یک رویداد کلیک تعریف کردم که شماره ایندکس آیتم و نمایش میده.

همچنین با توجه به زوج یا فرد بودن شماره ایندکس رنگ بک گراند آیتم فرق میکنه.

کد کامل کامپوننت Listflat.js

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


class ListItem extends Component {

  actionOnRow(item) {
    console.log('Selected Item :',item);
 }

  render(){
    return(
  
      <View style={{
        flex:1,
        backgroundColor:this.props.index %2 ==0 ? '#fcfcfc': '#64ea7a'
        ,padding:10
      
      
      }}>
  
         <Text style={{fontSize:23,color:'#f7073f'}}
         onPress={
          () =>
          console.log(`index is: ${this.props.index}`)
         }>
         {this.props.item.name}
         </Text>
         <Text>{this.props.item.email}</Text>
      </View>

    );
  }
}

 class ListFlat extends Component {

 constructor(props){

  super(props);

  this.state={

     DataListt : [

      {
          "key":"12",
          "name":"Hesam"
          ,"email":"hhh@yahoo.com"
      },
      {
          "key":"13",
          "name":"Eli"
          ,"email":"atyscode@yahoo.com"

      },
      {
          "key":"14",
          "name":"Ali"
          ,"email":"atyscode@gmail"

      }
      ,
      {
        "key":"12",
        "name":"Hesam"
        ,"email":"hhh@yahoo.com"
    }
  
  ]

   }
  }



   render() {
      return (

        <View style={{flex:1}}>

          <FlatList 
          data={this.state.DataListt}
          renderItem={({item,index})=>{
            return(
         <ListItem item={item} index={index}></ListItem>

          
             );
          }}
          
          >

          </FlatList>

        </View>
        
      );
   }
}



export {ListFlat}

حالا در هر صفحه ای که نیاز داشتیم کامپوننت ListFlat و صدا میزنیم و استفاده میکنم.

آموزش React Native

پیام بگذارید

نه + 16 =