Thành phần SectionList là gì và cách sử dụng nó trong React Native?

Một giao diện giúp hiển thị danh sách trong các phần. Một số tính năng quan trọng của SectionList là -

• Hỗ trợ Đầu trang / Chân trang cho Danh sách
• Hỗ trợ đầu trang / chân trang cho phần
• Đang tải cuộn
• Kéo để làm mới
• Hoàn toàn đa nền tảng

Thành phần SectionList cơ bản trông như sau -

<SectionList sections={DataContainer} keyExtractor={yourkeyextractor} renderItem={yourenderItem} renderSectionHeader={yoursectionheader} />

Để làm việc với SectionList, hãy nhập thành phần như hình dưới đây -

import { SectionList } from "react-native";

Đây là danh sách các thuộc tính quan trọng có sẵn trên SectionList -

Ví dụ 1:Sử dụng SectionList để hiển thị dữ liệu

Để làm việc với SectionList, trước tiên chúng ta cần nhập nó như hình dưới đây -

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

Sau khi nhập xong, tôi cần dữ liệu được hiển thị trong Danh sách mục. Dữ liệu được lưu trữ bên trong this.state.data như hình dưới đây -

this.state = {
   data: [
      {
         title: "Javascript Frameworks",
         data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
      },
      {
         title: "PHP Frameworks",
         data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
      }
   ]
};

Để triển khai chức năng cho renderItem

Hàm bên dưới đảm nhận việc lấy mục và hiển thị tương tự trong thành phần Văn bản như hình bên dưới -

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};

Thành phần Văn bản hiển thị các mục và được bao bọc bên trong Thành phần Chế độ xem.

Để triển khai SectionList

Đây là triển khai SectionList có dữ liệu, renderItem, keyExtractor và các đạo cụ renderSectionHeader.

<View style={styles.container}>
   <SectionList
      sections={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index}
      renderSectionHeader={({ section: { title } }) => (
         <Text style={styles.header}>{title}</Text>
      )}
   />
</View>

this.state.data được cấp cho dữ liệu đạo cụ và this.renderItem chức năng được chỉ định cho renderItem đạo cụ.

Dựa trên dữ liệu của mình, bạn có thể cho biết thuộc tính khóa sẽ là thuộc tính duy nhất từ ​​mảng dữ liệu và thuộc tính này sẽ được cấp cho các đạo cụ keyExtractor .Nếu không được cung cấp, nó sẽ coi chỉ số mảng là khóa giá trị.

Vì vậy, ở đây khóa duy nhất là mục + chỉ mục và khóa tương tự được gán cho keyExtractor.

keyExtractor={(item, index) => item + index}

renderSectionHeader đạo cụ đảm nhận việc hiển thị tiêu đề.

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
      data: [
         {
            title: "Javascript Frameworks",
            data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
         },
         {
            title: "PHP Frameworks",
            data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
         }
      ]
   };
}
renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};
render() {
   return (
      <View style={styles.container}>
         <SectionList
            sections={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index}
            renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

Đầu ra

Ví dụ 2

Bật đạo cụ StickSectionHeadersEnabled trong SectionList

Công cụ hỗ trợ stickSectionHeadersEnabled giúp bạn dán tiêu đề của sectionList của bạn lên trên cùng.>

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            {
               title: "Javascript Frameworks",
               data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
            },
            {
               title: "PHP Frameworks",
               data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
            },
            {
               title: "Apache Frameworks",
               data: ["Apache Flex", "Apache Crunch", "Apache CouchDB", "Apache Crail"]
            }
         ]
      };
   }
   renderItem = ({ item }) => {
      return (
         <View style={styles.item}>
            <Text >
               {item}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <SectionList
               stickySectionHeadersEnabled={true}
               sections={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={(item, index) => index}
               renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

Đầu ra