آموزش استفاده از List View در React Native

آموزش استفاده از List View در React Native

React Native مجموعه ای از component ها برای نمایش لیست ها در اختیار می گذارد. عمدتا از FlatList یا SectionList استفاده می شود.

FlatList component لیستی از دیتای متغیر اما ساختار- ثابتی را نمایش می دهد. FlatList برای لیست های طویل که تعداد آیتم های آن درزمان تغییر می کند، مناسب است. برخلاف ScrollView، FlatList فقط المان هایی که در لحظه روی صفحه قابل نمایش هستند را، render می کند.

FlatList component دو prop لازم دارد: data و renderItem.

Data منبع دیتای درون لیست را تعیین می کند. renderItem یک آیتم از منبع برمی دارد ویک component فرمت شده برای render برمی گرداند.

این مثال یک FlatList ساده با دیتای ثابت می سازد. هر آیتم درون data به صورت یک component Text، رندر می شود. سپس component FlatListBasics، FlatList و همه ی component های Text را render می کند.

آموزش پروژه محور React Native

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
export default class FlatListBasics extends Component {
  render() {
    return (
                        < View style={styles.container} >
                        < FlatList data={[
                                  {key 'Devin' },
                                  {key 'Dan' },
                                  {key 'Dominic' },
                                  {key 'Jackson' },
                                  {key 'James' },
                                  {key 'Joel' },
                                  {key 'John' },
                                  {key 'Jillian' },
                                  {key 'Jimmy' },
                                  {key 'Julie' },
                                  ]}
                                  renderItem={({item}) = > < Text style={styles.item} >{item.key}< /Text >}
        / >
      < /View >
    );
  }
}
const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})
						

زمانی که بخواهیم دیتا را درون یک ساختار منطقی بشکنیم، و احتمالا هر قسمت یک تیتر داشته باشد، SectionList به کار می آید که عملکردی مشابه UITableView ها در iOS دارد.

import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
export default class SectionListBasics extends Component {
  render() {
    return (
                        < View style={styles.container}>
                        < SectionList sections={[
                                     {title 'D' , data ['Devin', 'Dan' , 'Dominic' ]},
                                     {title 'J' , data ['Jackson', 'James' , 'Jillian' , 'Jimmy' , 'Joel' , 'John' , 'Julie' ]},
                                     ]}
                                     renderItem={({item}) => < Text style={styles.item}>{item}< /Text>}
          renderSectionHeader={({section}) => < Text style={styles.sectionHeader}>{section.title}< /Text>}
          keyExtractor={(item, index) => index}
        />
      < /View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})
						

یکی از رایج ترین کاربردهای List View نمایش دیتای دریافتی از server است. برای این کار لازم است درمورد ارتباطات تحت شبکه در React Native بدانیم.