SectionList 组件是什么以及如何在 React Native 中使用它?

react nativejavascriptmobile development

有助于按部分呈现列表的接口。SectionList 的一些重要功能是 −

  • 对列表的页眉/页脚支持
  • 对部分的支持
  • 滚动加载
  • 下拉刷新
  • 完全跨平台

基本的 SectionList 组件如下所示 −

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

要使用 SectionList,请按如下所示导入组件 −

import { SectionList } from "react-native";

以下是 SectionList 上可用的重要属性列表 −

属性说明
renderItem是呈现部分中项目的默认函数。它返回一个反应元素。
渲染函数将传递给 sectionlist,就像一个具有以下键的对象一样 −
'item'(对象)- 项目对象
'index'(数字)- 部分内项目的索引。
'section'(对象)- 部分对象。
'separators'(对象)- 是一个具有以下键的对象 −

  • highlight'(函数)- () => void
  • 'unhighlight'(函数)- () => void
  • 'updateProps'(函数)- (select, newProps) => void
  • 'select' (枚举) - 值为 'leading','trailing'
  • 'newProps' (对象)

sections要呈现的数据。
renderSectionHeader内容呈现在顶部。在 iOS 中,您将看到内容停靠在顶部。
renderSectionFooter内容呈现在底部。
刷新刷新时,如果需要呈现新数据,请将此属性设置为 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

以下是具有数据、renderItem、keyExtractor 和 renderSectionHeader 属性的 SectionList 实现。

<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 属性。

根据您的数据,您可以确定数据数组中唯一的 key 属性,并将其赋予属性 keyExtractor。如果没有给出,它将把数组索引视为 key 值。

因此,这里唯一的 key 是 item+index,并将其分配给 keyExtractor。

keyExtractor={(item, index) => gt; 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"
   }
});

输出


相关文章