Flatlist是一个高性能的简单列表组件，支持下面常用的功能
- 完全跨平台
- 支持水平布局模式
- 行组件显示或隐藏时可配置回调事件
- 支持单独的头部组件
- 支持单独的尾部组件
- 支持自定义行间分割线
- 支持下拉刷新
- 支持上拉加载
- 支持跳转到指定行
- 支持多列布局
- 引用
import { View, Text, FlatList } from 'react-native'
- 基本定义
this.state = {
refreshing: true,
recordlist: [],
page: 0, // 判断当前页数
pageSize: 10, // 每页条数
dataFlag: true, // 判断是否还有下一页
}
componentDidMount() {
this.queryTradeRecordList(0)
}
/**
* 加载列表
*/
private queryTradeRecordList(page?: number) {
requestTradeRecordList({
page: page,
size: this.state.pageSize
}).then(({ rows }) => {
this.setState((prevState) => {
const recordlist = prevState.recordlist.concat(rows)
return {
recordlist: recordlist,
refreshing: false,
dataFlag: rows.length >= this.state.pageSize ? true : false
}
})
}).catch(err => {
this.setState({ refreshing: false })
})
}
/**
* 渲染滚动到底部时的组件
*/
private renderListFooter() {
const { dataFlag, recordlist, page } = this.state
return (
<View style={styles.footerItem}>
{
dataFlag && recordlist.length ? (<Text style={styles.footerTipText}>加载中...</Text>):
!dataFlag && recordlist.length && page ? (<Text style={styles.footerTipText}>已全部加载</Text>) : null
}
</View>
)
}
- 组件使用
<FlatList
data={recordlist}
renderItem={({ item }) => (
// 每个item组件渲染
)}
keyExtractor={item => item.orderId}
ListEmptyComponent={
<Text style={styles.emptyText}>数据空空如也...</Text>
}
ListFooterComponent={this.renderListFooter()}
onRefresh={() => {
this.setState({ page: 0, recordlist: [], dataFlag: true, refreshing: true })
this.queryTradeRecordList(0)
}}
onEndReachedThreshold={.1}
onEndReached={() => {
if (this.state.dataFlag) {
let page = this.state.page * 1 + 1
this.setState({
page: page
})
this.queryTradeRecordList(page)
}
}}
/>
简单介绍
-
data渲染列表。为了简化起见，data属性目前只支持普通数组。 -
renderItem从data中取出数据并渲染到列表中。 -
keyExtractor用于给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为 key 值。若item.key也不存在，则使用数组下标。 -
ListEmptyComponent列表为空时渲染该组件。可以是 React Component,也可以是一个render函数，或者渲染好的 element。 -
ListFooterComponent尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。 -
onRefresh下拉刷新。如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。 -
onEndReachedThreshold距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。 -
onEndReached当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
