FlatList در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری از FlatList در react native استفاده کنیم.کامپوننت FlatList برای نمایش ساختار داده هایی که شبیه هم هستند در ScrollView مورد استفاده قرار میگیرد.هر آیتم موجود در یک ردیف بصورت یک به یک است.مزیت اصلی FlatList این است که فقط آیتم هایی را ارائه میدهد که بر روی صفحه نمایش نشان داده میشوند و آیتم هایی که در صفحه نمایش دیده نمی شوند رو ارائه نمیدهد.هنگامی که کابر scroll میکند،بصورت خودکارFlatList آیتم های بعدی را render میکند.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن AppRegistry , StyleSheet , FlatList , Text , View,Alert در بلاک import
|
1 |
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert } from 'react-native'; |
3.ایجاد constructor در کلاس اصلی با پارامتر props . ایجاد متد super(props) درون constructor .حالا از this.state برای تعریف آیتم های FlatList استفاده میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
constructor(props) { super(props); this.state = { FlatListItems: [ {key: 'One'}, {key: 'Two'}, {key: 'Three'}, {key: 'Four'}, {key: 'Five'}, {key: 'Six'}, {key: 'Seven'}, {key: 'Eight'}, {key: 'Nine'}, {key: 'Ten'}, {key: 'Eleven'}, {key: 'Twelve'} ]} |
4.ایجاد یک تابع به نام FlatListItemSeparator . با استفاده از این تابع ما بین هر یک از آیتم های FlatList یک جداکننده بصورت خط ایجاد میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
FlatListItemSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B", }} /> ); } |
5.اضافه کردن کامپوننت View در بلاک render’s return
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View> </View> ); } |
6.ایجاد یک استایل سفارشی به نام MainContainer در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 10 }, }); |
7.استفاده از MainContainer برای کامپوننت View
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
8.اضافه کردن کامپوننت FlatList درون View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View style={styles.MainContainer}> <FlatList /> </View> ); } |
9.مشخص کردن آیتم های FlatList با استفاده از data={ this.state.FlatListItems }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
render() { return ( <View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } /> </View> ); } |
10.فراخوانی تابع FlatListItemSeparator در FlatList با استفاده از ItemSeparatorComponent prop.
|
1 2 3 4 5 6 7 8 9 |
<View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} /> |
11.ایجاد یک استایل سقارشی به نام Item برای هر یک از آیتم های FlatList.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 10 }, item: { padding: 10, fontSize: 18, height: 44, }, }); |
12. render کردن هر یک از آیتم های FlatList با استفاده از کامپوننت Text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.item}} > {item.key} </Text>} /> </View> |
13.اضافه کردن ” “=onPress به کامپوننت Text درون FlatList
|
1 2 3 4 5 6 7 8 9 10 |
<View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.item} onPress={ } > {item.key} </Text>} /> |
14.ایجاد یک تابع به نام GetItem(item) برای نمایش آیتم کلیک شده .
|
1 2 3 4 5 |
GetItem (item) { Alert.alert(item); } |
15.آخرین گام فراخوانی تابع GetItem(item) در onPress کامپوننت Text و پاس دادن Item.key به این تابع
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>} /> </View> |
16.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, FlatList, Text, View, Alert } from 'react-native'; class Myproject extends Component { constructor(props) { super(props); this.state = { FlatListItems: [ {key: 'One'}, {key: 'Two'}, {key: 'Three'}, {key: 'Four'}, {key: 'Five'}, {key: 'Six'}, {key: 'Seven'}, {key: 'Eight'}, {key: 'Nine'}, {key: 'Ten'}, {key: 'Eleven'}, {key: 'Twelve'} ]} } FlatListItemSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B", }} /> ); } GetItem (item) { Alert.alert(item); } render() { return ( <View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 10 }, item: { padding: 10, fontSize: 18, height: 44, }, }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
اولا خیلی ممنونم از این آموزش گام به گامی که گذاشتین…کاملا مفید بود.
دوما اینکه من خیلی دنبال لیست کردن عکس ها گشتم اما چیزی پیدا نکردم… نمیدونم چجوری میشه Image رو بصورت کانست دیتا وارد کنم و بعدش توی لیست بیارم!! اگر ممکنه راهنمایی بفرمایید لطفا
متشکرم
سلام
وقت بخیر.آموزش زیر رو میتونه بهتون کمک کنه
https://reactapp.ir/%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A7%D8%B2-%D9%BE%D9%88%D8%B4%D9%87-local-%D8%AF%D8%B1-react-native/
ضمنا پیشنهاد می کنم آموزش مقدماتی react native که به صورت رایگان هست را مشاهده کنید
خیلی ممنونم 🙂
خواهش میکنم