عرض البيانات في قوائم في React Native

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

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

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

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

انظر المثال التالي عن FlatList (تجربة حية):

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‎ الخيار الأنسب.

انظر المثال التالي عن 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 الرسميّ