rn 分组列表组件SectionList

1、导入
	import {SectionList} from 'react-native'

2、使用
	    <SectionList
	      sections={数组类型数据源}
	      keyExtractor={(item, index) => item + index} key值
	      renderItem={函数,根据数据源渲染内容并返回组件}
	      renderSectionHeader={(item) => (
	        <Text style={styles.header}>渲染分组标题</Text>
	      )}
	    />
	    
3、参数
	(1)sections	用来渲染的数据，类似于FlatList中的data属性。
	(2)initialNumToRender	指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。
	(3)keyExtractor	必填,此函数用于为给定的 item 生成一个不重复的 key。
		(item: Item, index: number) => string
	(4)renderItem	用来渲染每一个 section 中的每一个列表项的默认渲染器。可以在 section 级别上进行覆盖重写。必须返回一个 react 组件。
		参数({item,index,section,separators})
			separators包含参数{highlight,unhighlight,updateProps}
	(5)inverted	布尔值,翻转滚动方向
	(6)stickySectionHeadersEnabled	当下一个 section 把它的前一个 section 的可视区推离屏幕的时候，让这个 section 的 header 粘连在屏幕的顶端。这个属性在 iOS 上是默认可用的，因为这是 iOS 的平台规范。
	
4、每个组的头/尾部组件
	renderSectionFooter	({section}) => React.Element
	renderSectionHeader	({section}) => React.Element

5、section的顶部和底部渲染
	SectionSeparatorComponent	必须是类组件
	
6、上拉加载
	(1)onEndReachedThreshold=n	决定当距离内容最底部还有多远时触发onEndReached回调。
		此参数是一个比值0.5,表示距离内容最底部的距离为当前列表可见长度的一半时触发。
	(2)onEndReached={({distanceFromEnd})=>{...}}
		当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
		
	(3)定义下拉加载过程的加载样式
		(1)给尾部组件返回一个自定义React元素
			ListFooterComponent={()=>{return ...}}
			
		(2)返回的React元素使用ActivityIndicator活动指示器可获得加载圆圈
			在请求数据时开启活动指示器,在结束时关闭即可
		
7、下拉刷新	
	(1)onRefresh={()=>{...}}	
		如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
	
	(2)refreshing=布尔值
		当为true时,显示加载符合,false停止,触发onRefresh设置为true,得到数据设置为false
		
	(3)若要自定义下拉刷新展示组件(适用于FlatList、ScrollView),定义不同样式的圈圈加载器
		(1)导入
			import { RefreshControl } from 'react-native'
			
		(2)<FlatList
				refreshControl={
					<RefreshControl 
						refreshing={触发显示布尔值} 
						onRefresh={刷新回调函数} 
						colors={['颜色数组']}
						enabled	指定是否要启用刷新指示器。
						progressBackgroundColor	指定刷新指示器的背景色。
						progressViewOffset	指定刷新指示器的垂直起始位置(top offset)。
						size	RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE
						tintColor	指定刷新指示器的颜色。
						title	指定刷新指示器下显示的文字。
						titleColor	指定刷新指示器下显示的文字的颜色。
					/>
    			}
			/>
		
8、自定义头部组件/尾部组件
	ListHeaderComponent		React元素或一个返回React元素的函数
	ListFooterComponent		React元素或一个返回React元素的函数

9、列表为空时渲染该组件
	ListEmptyComponent	React元素或一个返回React元素的函数

10、行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
	ItemSeparatorComponent	值为一个组件

代码示例:

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;

效果图