استخدام عروض القوائم في React Native

عروض القوائم (List views)

يُوفِّر React Native مجموعةً من المكونات لتقديم قوائم البيانات. عمومًا، ستستخدم في تطبيقك إمّاFlatList أو SectionList.

يعرض مكوّن FlatList قائمةَ تمريرٍ لعرض البيانات التي تتغيَّر والتي تكون ذات شكلٍ منسّق وهيئة متشابهة. المكوّنFlatList فعّال وجيّد لعرض قوائم طويلة من البيانات التي قد يتغير فيها عدد العناصر بمرور الوقت. وعلى النّقيض من مكوّن ScrollView الأكثر عمومية فمُكوّنFlatList لا يُصيِّر إلى ما يُعرَض حاليًا على الشاشة وليس كل العناصر في وقت واحد، ما يُوفّر أداءً أفضل.

يتطلب مكوّن FlatList خاصيّتين اثنتين: ‎data‎ و‎renderItem‎، تُمثّل الخاصيّة ‎data‎ مصدر بيانات القائمة (كمصفوفة أسماءٍ مثلًا). وتأخذ الخاصيّة renderItem عنصرًا واحدًا من المصدر في كلّ مرّة وتُعيد مكوّنًا منسّقًا لتصييره.

ينشئ هذا المثال قائمةَ ‎FlatList‎ من بياناتٍ مُباشرَة (hardcoded). يُصيَّر كل عنصرٍ من عناصر الخاصيّة ‎data‎ داخل مُكوِّن ‎Text‎ نصيٍّ. بعدها يُصيِّر المكوّن FlatListBasics قائمةَFlatList وجميع المكونات النصيّة.

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

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {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,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

إذا كنت تريد عرض مجموعة من البيانات مقسمة إلى أقسام منطقية، مع ترويسات أقسامٍ (section headers) اختياريّة على غرار UITableView على نظام التشغيل iOS ، فسيكون المكوّن ‎SectionList‎ الخيار الأنسب.

import React, { Component } from 'react';
import { AppRegistry, 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']},
            {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,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);

عرضُ بياناتٍ تُجلَبُ من الخادم (server) أكثرُ الاستخدامات شيوعًا لعروض القوائم. وللقيام بذلك، ستحتاج لتعلّم كيفيّة التّعامل مع الشّبكات في React Native.

مصادر

• صفحة Using List Views في توثيق React Native الرسمي.