React Native 列表视图之 SectionList

  • Z时代
  • 2024-01-10
  • 分类：综合

react

高性能的分组(section)列表组件，支持下面这些常用的功能：

  • 完全跨平台。

  • 行组件显示或隐藏时可配置回调事件。

  • 支持单独的头部组件。

  • 支持单独的尾部组件。

  • 支持自定义行间分隔线。

  • 支持分组的头部组件。

  • 支持分组的分隔线。

  • 支持多种数据源结构

  • 支持下拉刷新。

  • 支持上拉加载。

属性

名称类型必填说明
sectionsarray of Sections是用来渲染的数据，类似于 FlatList 中的 data 属性。
initialNumToRendernumber是指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。
keyExtractor(item: Item, index: number) => string是此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。
renderItemfunction是从data中挨个取出数据并渲染到列表中。
ItemSeparatorComponentcomponent否行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
ListEmptyComponentcomponent, function, element否列表为空时渲染该组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
ListFooterComponentcomponent, function, element否尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
ListHeaderComponentcomponent, function, element否头部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
columnWrapperStylestyle object否如果设置了多列布局（即将numColumns值设为大于 1 的整数），则可以额外指定此样式作用在每行容器上。
extraDataany否如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。
getItemLayoutfunction否getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。
horizontalboolean否设置为 true 则变为水平布局模式。
invertedboolean否翻转滚动方向。实质是将 scale 变换设置为-1。
onEndReachedfunction否当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
onRefreshfunction否如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。
refreshingboolean否在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  SectionList,
  Text,
  View
} from 'react-native';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      turnOn: true,
      turnOff: false
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <View style={styles.title_view}>
          <Text style={styles.title_text}>
          SectionList
          </Text>
        </View>
        <View style={styles.list}>
          <SectionList
            sections = {[
              {title:'A',data:['阿年','阿诚']},
              {title:'B',data:['白白','白马','步青云']},
              {title:'C',data:['菜菜','超','chen']},
              {title:'D',data:['大叔','东子']},
              {title:'E',data:['EDIFIER']}
            ]}
            renderItem={({item}) =>
              <Text style={styles.item}>{item}</Text>
            }
            renderSectionHeader = {({section})=>
              <Text style={styles.sectionHeader}>{section.title}</Text>
            }
            keyExtractor = {(item,index) => index}
          />
        </View>
      </View> 
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
  title_text: {
    fontSize:20,
    color:'white'
  },
  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,
  },
});

2. 效果图

以上是 React Native 列表视图之 SectionList 的全部内容， 来源链接： utcz.com/z/381221.html

回到顶部