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

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

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

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

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

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

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

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  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>
  );
}

export default FlatListBasics;

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

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

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,
  },
})

const SectionListBasics = () => {
    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>
    );
}

export default SectionListBasics

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

مصادر

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