ReactNative/sectionlist

SectionList

وهي واجهة عالية الأداء مستخدمة لإظهار القوائم المقسمة, وتمتاز بما يلي:

• دعم كامل للمنصات المتعددة (cross-platform).
• تدعم ضبط استجابات الإظهار.
• تدعم تذييل (footer) القائمة.
• تدعم فاصل العناصر.
• تدعم ترويسة القسم.
• تدعم فاصل الأقسام.
• تدعم إظهار العناصر والمعطيات الغير متجانسة (Heterogeneous).
• تدعم السحب للتحديث (Pull to Refresh).
• تدعم تحميل التمرير (Scroll loading).

يمكن استخدام واجهة أبسط مثل FlatList عند عدم الحاجة لدعم الأقسام.

مثال

• مثال لمكوِّن دالّي (Function Component)

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList
} from "react-native";
import Constants from "expo-constants";

const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"]
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"]
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"]
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream"]
  }
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8
  },
  header: {
    fontSize: 32,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 24
  }
});

export default App;

• مثال لمكوِّن صنفي (Class Component)

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList
} from "react-native";
import Constants from "expo-constants";

const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"]
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"]
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"]
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream"]
  }
];

Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => <Item title={item} />}
          renderSectionHeader={({ section: { title } }) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8
  },
  header: {
    fontSize: 32,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 24
  }
});

export default App;

يعد هذا المكون تغليف ملائمة (convenience wrapper) حول المكون الأساسي VirtualizedList, لذا فإن خاصياته موروثة منه (كذلك من المكوّن ScrollView) مع مراعاة ما يلي:

• إن الحالة الداخلية غير محفوظة عند تمرير المحتوى خارج نافذة الإظهار, لذا يجب التأكد من حفظ البيانات ضمن عنصر البيانات أو في المخازن الخارجية مثل Flux أو Redux أو Relay.
• إن هذا المكوّن من النوع الصافي PureComponent, مما يعني أنه لن يتم تحديث الإظهار في حال بقيت قيمة الخاصيات مساوية سطحيًا (shallow-equal) لقيمها السابقة. لذا يجب التأكد من أن كل شيء يتم تمريره كخاصيّة للدالة renderItem لا يحتوي على المساواة السطحية === بعد التحديثات, وإلا فإن الواجهة لن تُحدّث أثناء التغيير. ويتضمن هذا الخاصيّة data ومكوّن الحالة الأب.
• يظهر المحتوى بشكل غير متزامن خارج نافذة الإظهار, وذلك لتقييد الذاكرة ولتأمين سلاسة في التمرير. مما يعني أنه يمكن التمرير أسرع من معدّل التعبئة (fill rate) مما يؤدي لظهور محتوى فارغ لحظيًا. وهذا عبارة عن مقايضة (tradeoff) يمكن تعديلها لتناسب احتياجات كل تطبيق.
• تبحث القائمة بشكل افتراضي عن الخاصيّة key ضمن كل عنصر لتستخدمها كمفتاح React, غير أنه يمكن بشكل بديل استخدام الخاصيّة keyExtractor لإدخال مفتاح شخصي.

الخاصيّات (Props)

موروثة من الخاصيّات ScrollView.

renderItem

المُظهِر الافتراضي لكل عنصر في كل قسم, وهذا المظهر هو عبارة عن دالة تعيد عنصر React.

النوع	مطلوب
كائن (object)	لا