react-native列表FlatList下拉刷新上拉加载更多实现

react-native列表FlatList下拉刷新上拉加载更多实现

具体代码懒得择了,这里只给出比官网文档全一点的FlatList的使用说明吧

style={{backgroundColor:v.c_white,paddingBottom:50,marginBottom:50}}

data={this.state.listData}

renderItem={this._flatlistitem}

ListHeaderComponent={this._header}

ListEmptyComponent={this._empty}

ListFooterComponent={this._footer}

keyExtractor={this._keyExtractor}

onRefresh={() => {

this.setState({nextpage:1})

this._fetchlist()

}}

refreshing={this.state.nextpage==1?true:false}

onEndReachedThreshold={0.1}

onEndReached={(info) => {

this._fetchlist()

}}

/>

style:设置样式

data: 数组对象(我的是jsonarray)

renderItem:这里传入一个函数,用来创建每个item,FlatList在加载时会传入一个item对象,这个item对象就是上边data对象数组的每一子项数据

ListHeaderComponent: 传入一个header函数,生成FlatList的header界面

ListEmptyComponent: 传入一个empty函数, 空数据时显示的界面

ListFooterComponent: 传入一个footer函数,生成FlatList的footer界面(我用来做上拉显示加载更多)

onRefresh: 此属性实现下拉刷新, 传入下拉后重新加载数据函数

refreshing:状态显示控制,就是在没有加载完成之前,设置成true,则一直显示转圈,加载完成设置成false,圈消失,加载完成.我这里用state来控制

keyExtractor: 自己生成一个扩展key,代码如下:

_keyExtractor= (item,index) =>index

onEndReachedThreshold: 决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。(官方文档,照搬过来)

我项目里直接使用0.1,来实现上拉加载更多的时机.

onEndReached: 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用.

这个函数里实现加载更多数据,并且更新state,来实现列表更新