اضافه کردن Sticky header به Flatlist در react native


سلام دوستان.در این آموزش متنی قصد داریم Sticky header به Flatlist در React Native اضافه کنیم.Sticky header نوعی از view است که بصورت ثابت در بالای FlatList در React Native قرار میگیرد.Sticky header همیشه قابل مشاهده است حتی زمانی که کاربر در FlatList اسکرول میکنه.Sticky header برای نمایش عنوان داده های FlatList و عنوان مورد استفاده قرار میگیره.
1.ایمپورت کردن کامپوننت های StyleSheet,View, FlatList, Text, Alert و Platform در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet,View, FlatList, Text, Alert, Platform } from 'react-native'; |
2.ایجاد ()constructor در کلاس اصلی. یک آرایه با استفاده از State تعربف میکنیم که داده های Flatlist هستند.
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 |
constructor(props) { super(props); this.state = { FlatListItems: [ {key: 'Apple'}, {key: 'Apricot'}, {key: 'Avocado'}, {key: 'Banana'}, {key: 'Blackberry'}, {key: 'Blackcurrant'}, {key: 'Blueberry'}, {key: 'Boysenberry'}, {key: 'Cherry'}, {key: 'Coconut'}, {key: 'Grape'}, {key: 'Grapefruit'}, {key: 'Kiwifruit '}, {key: 'Lemon'}, {key: 'Lime'}, {key: 'Litchi'}, {key: 'Mango'}, {key: 'Melon'}, {key: 'Nectarine'}, {key: 'Orange'}, {key: 'Papaya'}, ]} } |
3.ایجاد یک تابع به نام ()FlatListItemSeparator . این تابع برای جداسازی آیتم های FlatList مورد استفاده قرار میگیره.
1 2 3 4 5 6 7 8 9 10 11 |
FlatListItemSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B", }} /> ); } |
4.ایجاد یک تابع به نام ()GetItem برای نمایش مقدار آیتم ها.
1 2 3 4 5 |
GetItem (item) { Alert.alert(item); } |
5.ایجاد یک تابع به نام ()Render_FlatList_Sticky_header . این تابع Sticky header رو در بالای FlatList رندر میکنه.این تابع رو ما در ListHeaderComponent={} prop در FlatList فراخوانی میکنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Render_FlatList_Sticky_header = () => { var Sticky_header_View = ( <View style={styles.header_style}> <Text style={{textAlign: 'center', color: '#fff', fontSize: 22}}> FlatList Sticky Header </Text> </View> ); return Sticky_header_View; }; |
6.اضافه کردن View در بلاک render’s return.
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
7.اضافه کردن FlatList درون View.
{}=ListHeaderComponent : این prop هدر رو در بالای FlatList تنظیم میکنه.
stickyHeaderIndices={[0]} : این prop موقعیت Sticky header رو در FlatList مشخص میکنه.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
render() { return ( <View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.FlatList_Item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>} ListHeaderComponent={this.Render_FlatList_Sticky_header} stickyHeaderIndices={[]} /> </View> ); } |
8.ایجاد استایل سفارشی
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 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, paddingTop: (Platform.OS === 'iOS') ? 20 : }, FlatList_Item: { padding: 10, fontSize: 18, height: 44, }, header_style:{ width: '100%', height: 45, backgroundColor: '#00BCD4', alignItems: 'center', justifyContent: 'center' } }); |
9.کد کامل برنامه در فایل App.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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import React, { Component } from 'react'; import { StyleSheet,View, FlatList, Text, Alert, Platform } from 'react-native'; export default class Myproject extends Component { constructor(props) { super(props); this.state = { FlatListItems: [ {key: 'Apple'}, {key: 'Apricot'}, {key: 'Avocado'}, {key: 'Banana'}, {key: 'Blackberry'}, {key: 'Blackcurrant'}, {key: 'Blueberry'}, {key: 'Boysenberry'}, {key: 'Cherry'}, {key: 'Coconut'}, {key: 'Grape'}, {key: 'Grapefruit'}, {key: 'Kiwifruit '}, {key: 'Lemon'}, {key: 'Lime'}, {key: 'Litchi'}, {key: 'Mango'}, {key: 'Melon'}, {key: 'Nectarine'}, {key: 'Orange'}, {key: 'Papaya'}, ]} } FlatListItemSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B", }} /> ); } GetItem (item) { Alert.alert(item); } Render_FlatList_Sticky_header = () => { var Sticky_header_View = ( <View style={styles.header_style}> <Text style={{textAlign: 'center', color: '#fff', fontSize: 22}}> FlatList Sticky Header </Text> </View> ); return Sticky_header_View; }; render() { return ( <View style={styles.MainContainer}> <FlatList data={ this.state.FlatListItems } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <Text style={styles.FlatList_Item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>} ListHeaderComponent={this.Render_FlatList_Sticky_header} stickyHeaderIndices={[]} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, paddingTop: (Platform.OS === 'iOS') ? 20 : }, FlatList_Item: { padding: 10, fontSize: 18, height: 44, }, header_style:{ width: '100%', height: 45, backgroundColor: '#00BCD4', alignItems: 'center', justifyContent: 'center' } }); |
اسکرین شات در نسخه اندروید:
اسکرین شات در نسخه Ios:
دیدگاهتان را بنویسید