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); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
آموزش React Navigation 5
آموزش ReactNative – ارسال sms از اپلیکیشن
رمزگذاری و رمزگشایی password در react native
پیاده سازی reCaptcha در react native
کتابخانه react-native-draggable-flatlist
دیدگاهتان را بنویسید