SectionList در react native

سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری از SectionList در React Native استفاده کنیم.کامپوننت SectionList برای نمایش داده های مختلف با یک دسته مشخص استفاده میشه.هر داده دارای یک سرصفحه منحصربه فرده که به طور خودکار به مجموعه های متعدد فراخوانی میشه.شما میتونید هم سرصفحه و هم آیتم ها رو مضخص کنید.

1.ایمپورت کردن کامپوننت های StyleSheet, View, SectionList, Text, Platform و Alert در پروژه.

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

import React, { Component } from 'react';

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

2.ایجاد یک تابع به نام GetSectionListItem با پارامتر item .این تابع برای نمایش آیتم های SectionList در قالب یک Alert مورد استفاده قرار میگیره.

GetSectionListItem=(item)=>{
 
    Alert.alert(item)
 
  }

GetSectionListItem=(item)=>{

Alert.alert(item)

}

3.تعریف 3 آرایه در بلاک render’s با استفاده از Var.

render() {
 
    var A = ['Apple', 'Apricot', 'Avocado'] ;
    var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;
    var C = ['Cherry', 'Coconut'] ;
 
    return (
 
     
      
    );
  }

render() {

var A = ['Apple', 'Apricot', 'Avocado'] ;

var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;

var C = ['Cherry', 'Coconut'] ;

return (

);

}

4.اضافه کردن کامپوننت View در بلاک render’s return.

render() {
 
    var A = ['Apple', 'Apricot', 'Avocado'] ;
    var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;
    var C = ['Cherry', 'Coconut'] ;
 
    return (
 
      <View style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 0 }}>
 
     
 
      </View> 
 
    );
  }

render() {

var A = ['Apple', 'Apricot', 'Avocado'] ;

var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;

var C = ['Cherry', 'Coconut'] ;

return (

</View>

);

}

5.اضافه کردن کامپوننت SectionList درون View اصلی.

sections: برای مشخص کردن عنوان و آیتم ها استفاده میشه.

renderSectionHeader: عنوان هر قسمت را نشان میدهد.

renderItem: این مورد برای نمایش آیتم ها در SectionList استفاده میشه.

keyExtractor: یک کلید یکتا موقعی که SectionList رندر میشه به ما میده.

render() {
 
    var A = ['Apple', 'Apricot', 'Avocado'] ;
    var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;
    var C = ['Cherry', 'Coconut'] ;
 
    return (
 
      <View style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 0 }}>
 
      <SectionList
 
          sections={[
 
            { title: 'Fruits Name From A', data: A },
 
            { title: 'Fruits Name From B', data: B },
 
            { title: 'Fruits Name From C', data: C },
 
          ]}
 
          renderSectionHeader={ ({section}) => <Text style={styles.SectionHeaderStyle}> { section.title } </Text> }
 
          renderItem={ ({item}) => <Text style={styles.SectionListItemStyle} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }
 
          keyExtractor={ (item, index) => index }
         
        />
 
      </View> 
 
    );
  }

render() {

var A = ['Apple', 'Apricot', 'Avocado'] ;

var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;

var C = ['Cherry', 'Coconut'] ;

return (

<SectionList

sections={[

{ title: 'Fruits Name From A', data: A },

{ title: 'Fruits Name From B', data: B },

{ title: 'Fruits Name From C', data: C },

]}

renderSectionHeader={ ({section}) => <Text style={styles.SectionHeaderStyle}> { section.title } </Text> }

renderItem={ ({item}) => <Text style={styles.SectionListItemStyle} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }

keyExtractor={ (item, index) => index }

</View>

);

}

6.ایجاد استایل سفارشی

کار با flex در react native

const styles = StyleSheet.create({
 
  SectionHeaderStyle:{
 
    backgroundColor : '#CDDC39',
    fontSize : 20,
    padding: 5,
    color: '#fff',
  },
 
  SectionListItemStyle:{
 
    fontSize : 15,
    padding: 5,
    color: '#000',
    backgroundColor : '#F5F5F5'
 
  }
 
 
});

const styles = StyleSheet.create({

SectionHeaderStyle:{

backgroundColor : '#CDDC39',

fontSize : 20,

padding: 5,

color: '#fff',

SectionListItemStyle:{

fontSize : 15,

padding: 5,

color: '#000',

backgroundColor : '#F5F5F5'

}

});

7.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, View, SectionList, Text, Platform, Alert } from 'react-native';
 
export default class App extends Component<{}> {
 
 
  GetSectionListItem=(item)=>{
 
    Alert.alert(item)
 
  }
 
 
  render() {
 
    var A = ['Apple', 'Apricot', 'Avocado'] ;
    var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;
    var C = ['Cherry', 'Coconut'] ;
 
    return (
 
      <View style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 0 }}>
 
      <SectionList
 
          sections={[
 
            { title: 'Fruits Name From A', data: A },
 
            { title: 'Fruits Name From B', data: B },
 
            { title: 'Fruits Name From C', data: C },
 
          ]}
 
          renderSectionHeader={ ({section}) => <Text style={styles.SectionHeaderStyle}> { section.title } </Text> }
 
          renderItem={ ({item}) => <Text style={styles.SectionListItemStyle} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }
 
          keyExtractor={ (item, index) => index }
         
        />
 
      </View> 
 
    );
  }
}
 
const styles = StyleSheet.create({
 
  SectionHeaderStyle:{
 
    backgroundColor : '#CDDC39',
    fontSize : 20,
    padding: 5,
    color: '#fff',
  },
 
  SectionListItemStyle:{
 
    fontSize : 15,
    padding: 5,
    color: '#000',
    backgroundColor : '#F5F5F5'
 
  }
 
 
});

import React, { Component } from 'react';

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

export default class App extends Component<{}> {

GetSectionListItem=(item)=>{

Alert.alert(item)

}

render() {

var A = ['Apple', 'Apricot', 'Avocado'] ;

var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;

var C = ['Cherry', 'Coconut'] ;

return (

<SectionList

sections={[

{ title: 'Fruits Name From A', data: A },

{ title: 'Fruits Name From B', data: B },

{ title: 'Fruits Name From C', data: C },

]}

renderSectionHeader={ ({section}) => <Text style={styles.SectionHeaderStyle}> { section.title } </Text> }

renderItem={ ({item}) => <Text style={styles.SectionListItemStyle} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }

keyExtractor={ (item, index) => index }

</View>

);

}

const styles = StyleSheet.create({

SectionHeaderStyle:{

backgroundColor : '#CDDC39',

fontSize : 20,

padding: 5,

color: '#fff',

SectionListItemStyle:{

fontSize : 15,

padding: 5,

color: '#000',

backgroundColor : '#F5F5F5'

}

});

اسکرین شات در نسخه اندروید:

اسکرین شات در نسخه Ios:

SectionList در react native

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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