عرض مصدر ReactNative/using a listview

<noinclude>{{DISPLAYTITLE:عرض البيانات في قوائم في React Native}}</noinclude>
يُوفِّر React Native مجموعةً من المكوّنات لعرض البيانات في قوائم. ستستخدم في تطبيقك إمّا <code>[[ReactNative/flatlist|FlatList]]</code> أو <code>[[ReactNative/sectionlist|SectionList]]</code> لعرض القوائم عمومًا.

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

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

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

انظر المثال التالي عن <code>FlatList</code> ([https://snack.expo.dev/@hsoubwiki/flatlist-basics تجربة حية]):
<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>
إذا كنت تريد عرض مجموعة من البيانات المقسمة إلى أقسام منطقية، مع ترويسات أقسامٍ (section headers) اختياريّة على غرار <code>UITableView</code> على نظام التشغيل iOS، فسيكون المكوّن ‎<code>SectionList</code>‎ الخيار الأنسب.

انظر المثال التالي عن <code>SectionList‎</code> ([https://snack.expo.dev/@hsoubwiki/sectionlist-basics تجربة حية]):
<syntaxhighlight lang="javascript">
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
</syntaxhighlight>
أكثرُ الاستخدامات شيوعًا للقوائم هو عرضُ بياناتٍ تُجلَبُ من الخادم (server)، وللقيام بذلك ستحتاج إلى تعلّم كيفيّة [[ReactNative/network|التعامل مع الشبكات في React Native.]]

== مصادر ==
* [https://facebook.github.io/react-native/docs/using-a-listview صفحة Using List Views في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]