react-native列表FlatList下拉刷新上拉加载更多实现
具体代码懒得择了,这里只给出比官网文档全一点的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,来实现列表更新
