ReactNative之FlatList的具体使⽤⽅法
之前使⽤的组件是ListView，当时要添加⼀个下拉刷新，上拉加载的功能，所以对ListView做了⼀些封装，但是后来看官⽅⽂档，不建议再使⽤ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不⾃⼰处理⼀下，也是有效率问题的。所以官⽅⼜推出了FlatList，⽽且⾃带上拉下拉的功能。
功能简介
1. 完全跨平台。
2. ⽀持⽔平布局模式。
3. ⾏组件显⽰或隐藏时可配置回调事件。
4. ⽀持单独的头部组件。
5. ⽀持单独的尾部组件。
6. ⽀持⾃定义⾏间分隔线。
7. ⽀持下拉刷新。
8. ⽀持上拉加载。
9. ⽀持跳转到指定⾏（ScrollToIndex）。
如果需要分组/类/区（section），请使⽤SectionList(这个我们会在之后的⽂章中介绍)
使⽤
FlatList如果只做简单使⽤也是很简单的，这⾥我们会分难以程度，逐渐介绍：
直接使⽤
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
可以看出跟之前的ListView很像，但是其中少了dataSource，这⾥，我们只需要传递数据，其它的都交给FlatList处理好了。
属性说明
1. ItemSeparatorComponent⾏与⾏之间的分隔线组件。不会出现在第⼀⾏之前和最后⼀⾏之后。在这⾥可以根据需要插⼊
⼀个view
2. ListEmptyComponent列表为空时渲染该组件。可以是React Component, 也可以是⼀个render函数，或者渲染好的
element。
3. ListFooterComponent尾部组件
4. ListHeaderComponent头部组件
5. columnWrapperStyle如果设置了多列布局（即将numColumns值设为⼤于1的整数），则可以额外指定此样式作⽤在每
⾏容器上。
6. data为了简化起见，data属性⽬前只⽀持普通数组。如果需要使⽤其他特殊数据结构，例如immutable数组，请直接使⽤
更底层的VirtualizedList组件。
7. extraData如果有除data以外的数据⽤在列表中（不论是⽤在renderItem还是Header或者Footer中），请在此属性中指
定。同时此数据在修改时也需要先修改其引⽤地址（⽐如先复制到⼀个新的Object或者数组中），然后再修改其值，否则界⾯很可能不会刷新。
8. getItem获取每个Item
9. getItemCount获取Item属相
10. getItemLayout是⼀个可选的优化，⽤于避免动态测量内容尺⼨的开销，不过前提是你可以提前知道内容的⾼度。如果你
的⾏⾼是固定的getItemLayout⽤起来就既⾼效⼜简单，类似下⾯这样：getItemLayout={(data, index) => ( {length: ⾏⾼, offset: ⾏⾼ * index, index} )}注意如果你指定了SeparatorComponent，请把分隔线的尺⼨也考虑到offset的计算之中。
11. horizontal设置为true则变为⽔平布局模式。
12. initialNumToRender指定⼀开始渲染的元素数量，最好刚刚够填满⼀个屏幕，这样保证了⽤最短的时间给⽤户呈现可见
的内容。注意这第⼀批次渲染的元素不会在滑动过程中被卸载，这样是为了保证⽤户执⾏返回顶部的操作时，不需要重新渲染⾸批元素。
13. initialScrollIndex指定渲染开始的item index
14. keyExtractor此函数⽤于为给定的item⽣成⼀个不重复的key。Key的作⽤是使React能够区分同类元素的不同个体，以便
在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key 也不存在，则使⽤数组下标。
15. legacyImplementation设置为true则使⽤旧的ListView的实现。
16. numColumns多列布局只能在⾮⽔平模式下使⽤，即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z
字形排列，类似启⽤了flexWrap的布局。组件内元素必须是等⾼的——暂时还⽆法⽀持瀑布流布局。
17. onEndReached当列表被滚动到距离内容最底部不⾜onEndReachedThreshold的距离时调⽤。
18. onEndReachedThreshold决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是⼀个⽐值⽽⾮像素
单位。⽐如，0.5表⽰距离内容最底部的距离为当前列表可见长度的⼀半时触发。
19. onRefresh如果设置了此选项，则会在列表头部添加⼀个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时
你需要正确设置refreshing属性。
20. onViewableItemsChanged在可见⾏元素变化时调⽤。可见范围和变化频率等参数的配置请设置viewabilityconfig属性
21. refreshing在等待加载新数据时将此属性设为true，列表就会显⽰出⼀个正在加载的符号。
22. renderItem根据⾏数据data，渲染每⼀⾏的组件。这个参照下⾯的demo
23. viewabilityConfig请参考ViewabilityHelper 的源码来了解具体的配置。
⽅法
scrollToEnd
滚动到底部。如果不设置getItemLayout
属性的话，可能会⽐较卡。
scrollToIndex
滚动到指定index的item
如果不设置getItemLayout
属性的话，⽆法跳转到当前可视区域以外的位置。
scrollToItem
滚动到指定item，如果不设置getItemLayout
属性的话，可能会⽐较卡。
scrollToOffset
滚动指定距离
Demo：
import React, {Component} from 'react';
import {
StyleSheet,
View,
FlatList,
Text,
Button,
} from 'react-native';
var ITEM_HEIGHT = 100;
export default class FlatListDemo extends Component {
_flatList;
_renderItem = (item) => {
var txt = '第' + item.index + '个' + ' title=' + item.item.title;
var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
return <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},]}>{txt}</Text>
}
_header = () => {
return <Text style={[,{backgroundColor:'black'}]}>这是头部</Text>;
}
_footer = () => {
return <Text style={[,{backgroundColor:'black'}]}>这是尾部</Text>;
}
_separator = () => {
return <View style={{height:2,backgroundColor:'yellow'}}/>;
}
render() {
var data = [];
for (var i = 0; i < 100; i++) {
data.push({key: i, title: i + ''});
}
return (
<View style={{flex:1}}>
<Button title='滚动到指定位置' onPress={()=>{
//this._flatList.scrollToEnd();
//this._flatList.scrollToIndex({viewPosition:0,index:8});
this._flatList.scrollToOffset({animated: true, offset: 2000});
}}/>
<View style={{flex:1}}>
<FlatList
ref={(flatList)=>this._flatList = flatList}
ListHeaderComponent={this._header}
ListFooterComponent={this._footer}
ItemSeparatorComponent={this._separator}
renderItem={this._renderItem}
//numColumns ={3}
//columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}            //horizontal={true}
//getItemLayout={(data,index)=>(
//{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index}reactnative开发
//)}
//onEndReachedThreshold={5}
/
/onEndReached={(info)=>{
//console.warn(info.distanceFromEnd);
//}}
//onViewableItemsChanged={(info)=>{
//console.warn(info);
//}}
data={data}>
</FlatList>
</View>
</View>
);
}
}
const styles = ate({
txt: {
textAlign: 'center',
textAlignVertical: 'center',
color: 'white',
fontSize: 30,
}
});
效果图：
进阶使⽤
在这⾥我准备了⼀份代码⽰例：
const {width,height}=('window')
export default class Main extends Component{
// 构造
constructor(props) {
super(props);
}
refreshing(){
let timer = setTimeout(()=>{
clearTimeout(timer)
alert('刷新成功')
},1500)
}
_onload(){
let timer = setTimeout(()=>{
clearTimeout(timer)
alert('加载成功')
},1500)
}
render() {
var data = [];
for (var i = 0; i < 100; i++) {
data.push({key: i, title: i + ''});
}
return (
<View style={{flex:1}}>
<Button title='滚动到指定位置' onPress={()=>{
this._flatList.scrollToOffset({animated: true, offset: 2000});
}}/>
<View style={{flex:1}}>
<FlatList
ref={(flatList)=>this._flatList = flatList}
ListHeaderComponent={this._header}
ListFooterComponent={this._footer}
ItemSeparatorComponent={this._separator}
renderItem={this._renderItem}
onRefresh={freshing}
refreshing={false}
onEndReachedThreshold={0}
onEndReached={
this._onload
}
numColumns ={3}
columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}
//horizontal={true}
getItemLayout={(data,index)=>(
{length: 100, offset: (100+2) * index, index}
)}
data={data}>
</FlatList>
</View>
</View>
);
}
_renderItem = (item) => {
var txt = '第' + item.index + '个' + ' title=' + item.item.title;
var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
return <Text style={[{flex:1,height:100,backgroundColor:bgColor},]}>{txt}</Text>  }
_header = () => {
return <Text style={[,{backgroundColor:'black'}]}>这是头部</Text>;
}
_footer = () => {
return <Text style={[,{backgroundColor:'black'}]}>这是尾部</Text>;
}
_separator = () => {
return <View style={{height:2,backgroundColor:'yellow'}}/>;
}
}
const ate({
container:{
},
content:{
width:width,
height:height,
backgroundColor:'yellow',
justifyContent:'center',
alignItems:'center'
},
cell:{
height:100,
backgroundColor:'purple',
alignItems:'center',
justifyContent:'center',
borderBottomColor:'#ececec',
borderBottomWidth:1
},
txt: {
textAlign: 'center',
textAlignVertical: 'center',
color: 'white',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。