rn 分组列表组件SectionList

阳光穿透心脏的1/2处 2021-07-24 20:49 757阅读 0赞

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;

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/1e9a309376dd4bcf91804e61cd6dcb6a.png