استخدام عروض القوائم في 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 الرسمي.