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

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

import React, { Component } from 'react';

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

2.ایجاد ()constructor در کلاس اصلی. یک آرایه با استفاده از State تعربف میکنیم که داده های Flatlist هستند.

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

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 مورد استفاده قرار میگیره.

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

FlatListItemSeparator = () => {

return (

<View

style={{

height: 1,

width: "100%",

backgroundColor: "#607D8B",

}}

);

}

4.ایجاد یک تابع به نام ()GetItem برای نمایش مقدار آیتم ها.

GetItem (item) {
   
  Alert.alert(item);
 
  }

GetItem (item) {

Alert.alert(item);

}

5.ایجاد یک تابع به نام ()Render_FlatList_Sticky_header . این تابع Sticky header رو در بالای FlatList رندر میکنه.این تابع رو ما در ListHeaderComponent={} prop در FlatList فراخوانی میکنیم.

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_FlatList_Sticky_header = () => {

var Sticky_header_View = (

<Text style={{textAlign: 'center', color: '#fff', fontSize: 22}}> FlatList Sticky Header </Text>

</View>

);

return Sticky_header_View;

};

6.اضافه کردن View در بلاک render’s return.

render() {
    return (
 
      <View style={styles.MainContainer}>
        
            
          
      </View>
            
    );
  }

render() {

return (

</View>

);

}

7.اضافه کردن FlatList درون View.

{}=ListHeaderComponent : این prop هدر رو در بالای FlatList تنظیم میکنه.

stickyHeaderIndices={[0]} : این prop موقعیت Sticky header رو در FlatList مشخص میکنه.

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={[0]}
 
              />
          
          
      </View>
            
    );
  }

render() {

return (

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

const styles = StyleSheet.create({
 
MainContainer :{
 
justifyContent: 'center',
flex:1,
paddingTop: (Platform.OS === 'iOS') ? 20 : 0
 
},
 
FlatList_Item: {
    padding: 10,
    fontSize: 18,
    height: 44,
},
 
header_style:{
 
  width: '100%', 
  height: 45, 
  backgroundColor: '#00BCD4', 
  alignItems: 'center', 
  justifyContent: 'center'
 
}
 
});

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

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/show-tab-navigator-inside-drawer-navigator/" 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_native-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">نمایش Tab Navigator درون Drawer Navigator</div></div></div><div class="ctaButton"></div></div></a></div> 
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={[0]}
 
              />
          
          
      </View>
            
    );
  }
}
 
const styles = StyleSheet.create({
 
MainContainer :{
 
justifyContent: 'center',
flex:1,
paddingTop: (Platform.OS === 'iOS') ? 20 : 0
 
},
 
FlatList_Item: {
    padding: 10,
    fontSize: 18,
    height: 44,
},
 
header_style:{
 
  width: '100%', 
  height: 45, 
  backgroundColor: '#00BCD4', 
  alignItems: 'center', 
  justifyContent: 'center'
 
}
 
});

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

<Text style={{textAlign: 'center', color: '#fff', fontSize: 22}}> FlatList Sticky Header </Text>

</View>

);

return Sticky_header_View;

};

render() {

return (

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

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

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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