استفاده از لیست برای نمایش اطلاعات مختلف داخل اپلیکیشن یکی از بخش های مهم هست یعنی تقریبا اپلیکیشنی نمیتونید پیدا کنید که نیازی به لیست نداشته باشند.
در روند طراحی اپلیکیشن به احتمال بسیار زیاد به لیست ها نیاز پیدا میکنید تا بتوانید مجموعه ای اطلاعات را نمایش دهید.
در 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 هست که باید همین آرایه که تعریف کردیم بهش پاس بدیم و یکی هم
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 و صدا میزنیم و استفاده میکنم.
