FlatList相当于ListView的升级版，优化了数据过大带来的性能问题，同时也增加了许多好用的功能。
FlatList的功能简介，复制过来的：
完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）
关于FlatList的属性：
必须属性：
data：列表数据，
renderItem：每行的渲染组件，一般返回一个View
其他属性：
ItemSeparatorComponent：分割线，一般返回一个View
ListFooterComponent：结尾组件，一般返回一个View
ListHeaderComponent：头组件，一般返回一个View
horizontal：设置为true则变为水平列表
numColumns：列数，默认一列
columnWrapperStyle：numColumns大于1时，设置每行的样式
getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销，此属性为异步执行，滑动太快容易显示空白
refreshing：是否正在加载数据
onRefresh：下拉刷新数据，需要一个方法
onViewableItemsChanged：当一个新的Item渲染或者隐藏的时候调用此方法。参数：info: {viewableItems: Array, changed: Array} viewableItems：当前可见的Item，changed：渲染或者隐藏的Item
scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡
scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滚动到制定的位置
scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置
实现一个FlatList：
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
FlatList,
View,
Button,
Text,
TouchableOpacity
} from 'react-native';
export default class RnflatListView extends React.PureComponent {
_flatList;
constructor(props) {
super(props);
this.state = {
refer: false,
}
}
_goToBottom = () => {
this._flatList.scrollToEnd()
};
_goToTop = () => {
this._flatList.scrollToOffset({animated: true, offset: 0})
};
_headerView = () => {
return (
<View style={{flex: 1, backgroundColor: '#a1f11a'}}>
<Button onPress={this._goToBottom} title='点我到底部'>
</Button>
</View>
)
};
_footView = () => {
return (
<View style={{flex: 1, backgroundColor: '#a1f11a'}}>
<Button onPress={this._goToTop} title='点我到顶部'>
</Button>
</View>
)
};
_renderItemView = (item) => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', height: 44}}>
<Text>这里显示的数据为：{item.key}，名称：{item.title}</Text>
</View>
)
};
_separatorView = () => {
return (
<View style={{flex: 1, backgroundColor: '#ff0000', height: 1}}>
</View>
)
};
_onRefresh = () => {
this.setState({
refer: true,
});
this.timer1 = setTimeout(
()=>{
console.log('刷新结束');
this.setState({
refer: false,
});
},
5000,
);
};
componentWillUnmount() {
clearTimeout(this.timer1)
}
render() {
var data = [];
for (var i=0; i<100; i++) {
data[i] = {key: i, title: '第' + i + '行'}
}
return(
<View style={{backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>
<FlatList ref={(flatList)=>this._flatList = flatList} style={{backgroundColor: '#aaffaa', flex: 1, marginTop: 20}}
data={data}
renderItem={({item}) => this._renderItemView(item)}
ListHeaderComponent = {this._headerView}
ListFooterComponent = {this._footView}
ItemSeparatorComponent = {this._separatorView}
// numColumns ={2} 分成两列
// columnWrapperStyle={{ borderWidth: 2, borderColor: 'black' }} 分列后设置边框
onViewableItemsChanged={(info)=>{
console.log(info);
}}
// horizontal = {true} 将列表横着放
refreshing = {this.state.refer}
onRefresh={this._onRefresh}
onEndReachedThreshold={-0.05}
onEndReached={(info) => {
alert("滑动到底部了");
} }
/>
</View>
)
}
}
AppRegistry.registerComponent('RnflatListView', ()=> RnflatListView);
效果显示：
Untitled9.gif
