اضافه کردن Header و Footer به ListView


سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری Footer و Header به ListView در React Native اضافه کنیم.ListView از دو ویژگی پیشرفته Header و Footer پشتیبانی میکنه.Header در بالای اولین آیتم ListView قرار میگیره این یک نوع نمایش بلوک است که مانند یک پیام در ListView استفاده می شود.Footer در پایین ListView و بعد از آخرین آیتم نمایش داده می شود.
props های ListView که برای نمایش Footer و Header استفاده می شود:
- {}=renderHeader: ما نیاز داریم تا یک تابع رو فراخوانی کنیم تا یک View رو برگردونه برای render کردن header.
- {}=renderFooter: ما نیاز داریم تا یک تابع رو فراخوانی کنیم تا یک View رو برگردونه برای render کردن footer.
1.ایمپورت کردن کامپوننت های StyleSheet, View, Text, Alert, ListView و Platform در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Alert, ListView, Platform } from 'react-native'; |
2.ایجاد ()constructor در پروژه.ما نیاز داریم یک state برای داده های ListView تعریف کنیم.
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 |
constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]), }; } |
3.ایجاد تابع ListViewItemSeparator.این تابع بین آیتم های ListView یک خط قرار میدهد.
1 2 3 4 5 6 7 8 9 10 11 |
ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } |
4.ایجاد یک تابع به نام showItem .این تابع آیتم انتخابی ListView رو در قالب یک Alert نمایش می دهد.
1 2 3 4 5 |
showItem (rowData) { Alert.alert(rowData); } |
5.ایجاد یک تابع به نام renderHeader . از این تابع برای نمایش Header در بالای ListView استفاده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
renderHeader = () => { var header = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Header </Text> </View> ); return header; }; |
6.ایجاد یک تابع به نام renderFooter برای نمایش Footer در ListView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
renderFooter = () => { var footer = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Footer </Text> </View> ); return footer; }; |
7.اضافه کردن View در بلاک render’s return و قرار دادن ListView درون این View.
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 |
render() { return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader} renderFooter={this.renderFooter} renderSeparator= {this.ListViewItemSeparator} renderRow={ (rowData) => <Text style={styles.rowViewContainer} onPress={this.showItem.bind(this, rowData)}>{rowData}</Text> } /> </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 28 29 30 31 32 33 34 35 36 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, paddingTop: (Platform.OS == 'ios' ? 20 : ) }, rowViewContainer: { padding: 10, fontSize: 18, height: 44, }, header_footer_style:{ width: '100%', height: 45, backgroundColor: '#FF9800' }, textStyle:{ textAlign: 'center', color: '#fff', fontSize: 22, padding: 7 } }); |
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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Alert, ListView, Platform } from 'react-native'; export default class Myproject extends Component { constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]), }; } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } showItem (rowData) { Alert.alert(rowData); } renderHeader = () => { var header = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Header </Text> </View> ); return header; }; renderFooter = () => { var footer = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Footer </Text> </View> ); return footer; }; render() { return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader} renderFooter={this.renderFooter} renderSeparator= {this.ListViewItemSeparator} renderRow={ (rowData) => <Text style={styles.rowViewContainer} onPress={this.showItem.bind(this, rowData)}>{rowData}</Text> } /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, paddingTop: (Platform.OS == 'ios' ? 20 : ) }, rowViewContainer: { padding: 10, fontSize: 18, height: 44, }, header_footer_style:{ width: '100%', height: 45, backgroundColor: '#FF9800' }, textStyle:{ textAlign: 'center', color: '#fff', fontSize: 22, padding: 7 } }); |
اسکرین شات در پلتفرم Androuid:
دیدگاهتان را بنویسید