FlatList
之前使用的组件是ListView，当时要添加一个下拉刷新，上拉加载的功能，所以对ListView做了一些封装，但是后来看官方文档，不建议再使用ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不自己处理一下，也是有效率问题的。所以官方又推出了FlatList，而且自带上拉下拉的功能
功能简介
完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持下拉刷新。 支持上拉加载。 支持跳转到指定行（ScrollToIndex）。 如果需要分组/类/区（section），请使用SectionList
属性介绍
1、data列表数据源
数据格式
class FlatListTest extends Component {
constructor(props) {
super(props);
this.state = {
taskList: [
{taskId:"9",title:"查看营销推广",integral:"50",status:1},
{taskId:"10",title:"查看客户管理",integral:"100",status:1},
{taskId:"11",title:"查看买车线索",integral:"100",status:1},
{taskId:"12",title:"查看全部功能",integral:"200",status:1}
]
};
}
render() {
return (
<View style={flatListStyles.container}>
<FlatList
data={this.state.taskList}//获取列表数据源
/>
</View>
);
}
}
2、renderItem从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染
简单使用
_renderItem = ({ item, index }) => {
return (
<View style={styles.list} key={index}>
<View style={styles.content}>
<Text style={styles.contentTitle}>{item.title}</Text>
<Text style={styles.contentTip}>
任务奖励<Text style={{ color: "#FF552E" }}>+{item.integral}积分</Text>
</Text>
</View>
<View style={styles.listBtn}>
<Text style={styles.text13FFF}>去完成</Text>
</View>
</View>
);
};
<FlatList
renderItem={this._renderItem}//渲染列表
/>
3、ListHeaderComponent添加头部组件
简单使用
_header = () => {
return (
<View style={styles.listTitle}>
<Text style={styles.listTitleText}>任务列表</Text>
</View>
);
};
<FlatList
ListHeaderComponent={this._header} //header头部组件
/>
4、ListFooterComponent属性为FlatList添加尾部组件，接收的参数跟ListHeaderComponent相同
简单使用
_footer = () => (
<Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦，没有啦！</Text>
)
<FlatList
ListFooterComponent={this._footer} //添加尾部组件
/>
5、ItemSeparatorComponent属性可以为FlatList列表之间添加分割线
简单使用
//方法声明
_itemSeparator = () => {
return (
<View style={{height: 1, backgroundColor: 'skyblue'}}/>
)
}
//组件调用
<FlatList
ItemSeparatorComponent={this._itemSeparator}//分割线组件
/>
6、ListEmptyComponent空数据视图
简单使用
_renderEmptyView = () => {
return (
<View style={styles.tastListError}>
<Text style={styles.tastListErrorText}>服务器请求失败</Text>
</View>
);
};
<FlatList
ListEmptyComponent={this._renderEmptyView}
/>
7、keyExtractor用于为给定的item生成一个不重复的key
Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销
若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标index
简单使用
_keyExtractor = (item, index) => "index" + index + item;
<FlatList
keyExtractor={this._keyExtractor}
/>
8、getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销
不过前提是你可以提前知道内容的高度。如果你的行高是固定的getItemLayout
用起来就既高效又简单
getItemLayout={(data, index) => ({
length: 44, offset: (44 + 1) * index, index
})}
注意：如果你指定了SeparatorComponent，请把分隔线的尺寸也考虑到offset的计算之中
设置这一属性，在调用FlatList的跳转函数的时候非常有用，否则可能会很卡顿！如scrollToEnd(),scrollToIndex()，这两个方法后边再说！
FlatList中有两个属性，可以用来设置下拉刷新。
- refreshing在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号.
- onRefresh如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
简单使用
<FlatList
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({refreshing: true})//开始刷新
//这里模拟请求网络，拿到数据，3s后停止刷新
setTimeout(() => {
alert('没有可刷新的内容！');
this.setState({refreshing: false});//停止刷新
}, 3000);
}}
/>
10、上拉加载
关于上拉加载，FlatList也封装有两个属性来实现：
- onEndReachedThreshold：这个属性决定当距离内容最底部还有多远时触发onEndReached回调。需要注意的是此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。所以它的取值范围为：(0,1)，不包含0和1。
- onEndReached：列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
<FLatList
onEndReachedThreshold={0.1}
onEndReached={({distanceFromEnd}) => (
setTimeout(() => {
this.setState((state) => ({
data: state.data.concat(this._newData),
}));
}, 3000)
)}
/>
这里我们设置的距离为列表可见长度的1/10，而触发了onEndReached函数时，我们设置了一个定时器，3s后，将data中的数据添加了新数据，从而达到上拉加载更多的效果
horizontal：设置为true则变为水平布局模式（默认false）
numColumns：多列布局只能在非水平模式下使用，即必须是horizontal={false}
。此时组件内元素会从左到右从上到下按Z字形排列，类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局
columnWrapperStyle：如果设置了多列布局（即将numColumns
值设为大于1的整数），则可以额外指定此样式作用在每行容器上
extraData：如果有除data以外的数据用在列表中（不论是用在renderItem
还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新
getItem：获取每个Item
getItemCount：获取Item属相
initialNumToRender：指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素
initialScrollIndex：指定渲染开始的item index
方法介绍
1、scrollToEnd
滚动到底部。如果不设置getItemLayout属性的话，可能会比较卡
扫描二维码关注公众号，回复：
1333503 查看本文章
2、scrollToIndex
滚动到指定index的item如果不设置getItemLayout属性的话，无法跳转到当前可视区域以外的位置
<FlatList
ref={(flatList) => this._flatList = flatList}
/>
//在点击事件中调用
this._flatList.scrollToEnd();
//viewPosition参数：0表示顶部，0.5表示中部，1表示底部
this._flatList.scrollToIndex({viewPosition: 0, index: this.state.text});
**********************************************************************************************************************************
SectionList
用法和FlatList基本上一样
SectionList高性能的分组(section)列表组件，支持下面这些常用的功能
完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
常用属性
sections: Array相当于ListView中的数据源，SectionList所需要的数据都是经由sections属性传入，数据类型为Array类型
renderItem: (info: {item: Item, index: number}) => ?React.Element renderItem返回Section中的每个小的的Item。可以通过函数返回Element，函数有一个info参数，参数为JSON形式，参数形式为：{item: Item, index: number}。
renderSectionHeader: (info: {section: SectionT}) => ?React.Element renderSectionHeader返回每个Section的标志性头部，可以通过函数返回Element，函数有一个info参数，参数为JSON形式，参数形式为：{section:{key : number, data : [ Object, Object, …] }}。
refreshing: boolean 是否处于刷新状态。
onRefresh: () => void 通过函数改变refreshing从而控制刷新与否。
ItemSeparatorComponent : ReactClass item之间的分隔线组件。不会出现在第一行之前和最后一行之后。
SectionSeparatorComponent : ReactClass .每个section之间的分隔组件。
ListHeaderComponent : ReactClass SectionList头部组件。
ListFooterComponent : ReactClass SectionList尾部组件。
keyExtractor: (item: Item, index: number) => string 默认情况下每个item都需要提供一个不重复的key属性，因此可以通过keyExtractor函数为每一个item生成一个唯一的key。
onEndReached : (info: {distanceFromEnd: number}) => void 是否到达底部，在默认情况下会有一个默认的distanceFromEnd临界值。可以通过此属性来达到上拉加载的效果。
onEndReachedThreshold number 调用onEndReached之前的临界值，单位是像素