اضافه کردن 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 در پروژه.

import React, { Component } from 'react';
 
import { StyleSheet, View, Text, Alert, ListView, Platform } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, View, Text, Alert, ListView, Platform } from 'react-native';

2.ایجاد ()constructor در پروژه.ما نیاز داریم یک state برای داده های ListView تعریف کنیم.

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'
           
       ]),
   
   };
 
 
 }

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 یک خط قرار میدهد.

ListViewItemSeparator = () => {
   return (
     <View
       style={{
         height: .5,
         width: "100%",
         backgroundColor: "#000",
       }}
     />
   );
 }

ListViewItemSeparator = () => {

return (

<View

style={{

height: .5,

width: "100%",

backgroundColor: "#000",

}}

);

}

4.ایجاد یک تابع به نام showItem .این تابع آیتم انتخابی ListView رو در قالب یک Alert نمایش می دهد.

showItem (rowData) {
  
    Alert.alert(rowData);
 
 }

showItem (rowData) {

Alert.alert(rowData);

}

5.ایجاد یک تابع به نام renderHeader . از این تابع برای نمایش Header در بالای ListView استفاده می شود.

renderHeader = () => {
  
    var header = (
  
    <View style={styles.header_footer_style}>
  
      <Text style={styles.textStyle}> ListView Header </Text>
  
    </View>
  
    );
  
    return header;
  
  };

renderHeader = () => {

var header = (

<Text style={styles.textStyle}> ListView Header </Text>

</View>

);

return header;

};

6.ایجاد یک تابع به نام renderFooter برای نمایش Footer در ListView.

renderFooter = () => {
  
    var footer = (
  
    <View style={styles.header_footer_style}>
  
      <Text style={styles.textStyle}> ListView Footer </Text>
  
    </View>
  
    );
  
    return footer;
  
  };

renderFooter = () => {

var footer = (

<Text style={styles.textStyle}> ListView Footer </Text>

</View>

);

return footer;

};

7.اضافه کردن View در بلاک render’s return و قرار دادن ListView درون این View.

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>
           
   );
 }

render() {

return (

<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.ایجاد استایل سفارشی.

const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   flex:1,
   paddingTop: (Platform.OS == 'ios' ? 20 : 0)
 },
 
 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
 
}
 
});

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

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/best-code-editors-for-react-native/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/react-2-300x162.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">5 نرم افزار برتر ویرایش کد در React Native</div></div></div><div class="ctaButton"></div></div></a></div> 
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 : 0)
 },
 
 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
 
}
 
});

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 = (

<Text style={styles.textStyle}> ListView Header </Text>

</View>

);

return header;

};

renderFooter = () => {

var footer = (

<Text style={styles.textStyle}> ListView Footer </Text>

</View>

);

return footer;

};

render() {

return (

<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:

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ