什麼是 SectionList 元件，如何在 React Native 中使用它？

一個幫助渲染分段列表的介面。SectionList 的一些重要功能包括：

  • 列表的頭部/底部支援
  • 分段的頭部/底部支援
  • 滾動載入
  • 下拉重新整理
  • 完全跨平臺

基本的 SectionList 元件如下所示：

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

要使用 SectionList，請按如下所示匯入元件：

import { SectionList } from "react-native";

以下是 SectionList 上可用的重要屬性列表：

屬性描述
renderItem渲染分段中專案的預設函式。它返回一個 React 元素。
渲染函式將作為包含以下鍵的物件傳遞給 sectionlist：
'item'(物件) - 專案物件
'index' (數字) - 分段內賦予專案的索引。
'section' (物件) - 分段物件。
'separators' (物件) - 是一個包含以下鍵的物件：

  • highlight' (函式) - () => void
  • 'unhighlight' (函式) - () => void
  • 'updateProps' (函式) - (select, newProps) => void
  • 'select' (列舉) - 值為 'leading','trailing'
  • 'newProps' (物件)

sections要渲染的資料。
renderSectionHeader內容渲染在頂部。在 iOS 中，您會看到內容停靠在頂部。
renderSectionFooter內容渲染在底部。
refreshing重新整理時，如果要渲染新資料，請將此屬性設定為 true。
ListEmptyComponent當列表為空時將呼叫的元件類、渲染函式或渲染元素。如果您想在列表為空時執行某些操作，此元件將很有用。
ListFooterComponent將在所有專案底部渲染的元件類、渲染函式或渲染元素。
ListFooterComponentStyle此處可以完成頁尾元件所需的樣式。
ListHeaderComponent將在所有專案頂部渲染的元件類、渲染函式或渲染元素。
ListHeaderComponentStyle此處可以完成標題元件所需的樣式。
keyExtractor為給定索引提取唯一的鍵。該鍵用於快取，也用於跟蹤專案的重新排序。

示例 1：使用 SectionList 顯示資料

要使用 SectionList，我們首先需要匯入它，如下所示：

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

匯入完成後，我需要在 SectionList 中顯示資料。資料儲存在 this.state.data 中，如下所示：

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

實現 renderItem 函式

下面的函式負責獲取專案並在 Text 元件中顯示它，如下所示：

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

Text 元件顯示專案，幷包裝在 View 元件中。

實現 SectionList

這是 SectionList 的實現，它具有 data、renderItem、keyExtractor 和 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 傳遞給 data 屬性，this.renderItem 函式分配給 renderItem 屬性。

根據您的資料，您可以指定鍵屬性，該屬性將是資料陣列中的唯一屬性，並且應將其傳遞給 keyExtractor 屬性。如果未指定，它將使用陣列索引作為 key 值。

因此，此處唯一的鍵是 item+index，並且將其分配給 keyExtractor。

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

renderSectionHeader 屬性負責顯示標題。

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"
   }
});

輸出

示例 2

在 SectionList 中啟用 stickySectionHeadersEnabled 屬性

stickySectionHeadersEnabled 屬性可幫助您將 sectionList 的標題貼上到頂部。使用者滾動時，如果下一個標題進入視野併到達頂部，它將貼上在頂部，並且對所有標題都將繼續這樣做。

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"
   }
});

輸出

更新於：2021-07-01

1K+ 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告