SectionList در react native


سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری از SectionList در React Native استفاده کنیم.کامپوننت SectionList برای نمایش داده های مختلف با یک دسته مشخص استفاده میشه.هر داده دارای یک سرصفحه منحصربه فرده که به طور خودکار به مجموعه های متعدد فراخوانی میشه.شما میتونید هم سرصفحه و هم آیتم ها رو مضخص کنید.
1.ایمپورت کردن کامپوننت های StyleSheet, View, SectionList, Text, Platform و Alert در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, SectionList, Text, Platform, Alert } from 'react-native'; |
2.ایجاد یک تابع به نام GetSectionListItem با پارامتر item .این تابع برای نمایش آیتم های SectionList در قالب یک Alert مورد استفاده قرار میگیره.
1 2 3 4 5 |
GetSectionListItem=(item)=>{ Alert.alert(item) } |
3.تعریف 3 آرایه در بلاک render’s با استفاده از Var.
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { var A = ['Apple', 'Apricot', 'Avocado'] ; var B = ['Banana', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ; var C = ['Cherry', 'Coconut'] ; return ( ); } |
4.اضافه کردن کامپوننت View در بلاک render’s return.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 : }}> </View> ); } |
5.اضافه کردن کامپوننت SectionList درون View اصلی.
sections: برای مشخص کردن عنوان و آیتم ها استفاده میشه.
renderSectionHeader: عنوان هر قسمت را نشان میدهد.
renderItem: این مورد برای نمایش آیتم ها در SectionList استفاده میشه.
keyExtractor: یک کلید یکتا موقعی که SectionList رندر میشه به ما میده.
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 |
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 : }}> <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.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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
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 |
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 : }}> <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:
دیدگاهتان را بنویسید