[RN] React Native 实现 FlatList上拉加载

时间:2024-10-09 11:04:32
 FlatList可以利用官方组件 RefreshControl实现下拉刷新功能,但官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点。
不过我们仍可以通过FlatListonEndReachedonEndReachedThreshold属性来实现相应效果。

我们以github提供的api为例

先查看效果:
[RN] React Native 实现 FlatList上拉加载
具体实现代码如下:
import React, {Component} from "react";
import {ActivityIndicator, FlatList, StyleSheet, Text, View, Image} from "react-native"; const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = ;//当前第几页
let totalPage=;//总的页数
let itemNo=;//item的个数 class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
//网络请求状态
error: false,
errorInfo: "",
dataArray: [],
showFoot:, // 控制foot, 0:隐藏footer 1:已加载完成,没有更多数据 2 :显示加载中
isRefreshing:false,//下拉控制
}
} //网络请求——获取第pageNo页数据
fetchData(pageNo) {
//这个是js的访问网络的方法
fetch(REQUEST_URL+pageNo)
.then((response) => response.json())
.then((responseData) => {
let data = responseData.items;
let dataBlob = [];
let i = itemNo; data.map(function (item) {
dataBlob.push({
key: i,
value: item,
})
i++;
});
itemNo = i;
console.log("itemNo:"+itemNo);
let foot = ;
if(pageNo>=totalPage){
foot = ;//listView底部显示没有更多数据了
} this.setState({
//复制数据源
dataArray:this.state.dataArray.concat(dataBlob),
isLoading: false,
showFoot:foot,
isRefreshing:false,
});
data = null;
dataBlob = null;
})
.catch((error) => {
this.setState({
error: true,
errorInfo: error
})
})
.done();
} componentDidMount() {
//请求数据
this.fetchData( pageNo );
} //加载等待页
renderLoadingView() {
return (
<View style={styles.container}>
<ActivityIndicator
animating={true}
color='red'
size="large"
/>
</View>
);
} //加载失败view
renderErrorView() {
return (
<View style={styles.container}>
<Text>
Fail
</Text>
</View>
);
} //返回itemView
_renderItemView({item}) {
return (
<View style={styles.itemBox}>
<View style={styles.leftArea}>
<Image style={styles.avatar} source={{uri:item.value.owner.avatar_url}} />
</View>
<View style={styles.rightArea}>
<Text style={styles.title}>{item.value.name}</Text>
<Text style={styles.desc}>{item.value.description}</Text>
</View>
</View>
);
} renderData() {
return ( <FlatList
data={this.state.dataArray}
renderItem={this._renderItemView}
ListFooterComponent={this._renderFooter.bind(this)}
onEndReached={this._onEndReached.bind(this)}
onEndReachedThreshold={}
ItemSeparatorComponent={this._separator}
/> );
} render() {
//第一次加载等待的view
if (this.state.isLoading && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
//请求失败view
console.log(this.state.error);
console.log(this.state.errorInfo);
return this.renderErrorView();
}
//加载数据
return this.renderData();
} _separator(){
return <View style={{height:,backgroundColor:'#999999'}}/>;
} _renderFooter(){
if (this.state.showFoot === ) {
return (
<View style={{height:,alignItems:'center',justifyContent:'flex-start',}}>
<Text style={{color:'#999999',fontSize:,marginTop:,marginBottom:,}}>
没有更多数据了
</Text>
</View>
);
} else if(this.state.showFoot === ) {
return (
<View style={styles.footer}>
<ActivityIndicator />
<Text>正在加载...</Text>
</View>
);
} else if(this.state.showFoot === ){
return (
<View style={styles.footer}>
<Text></Text>
</View>
);
}
} _onEndReached(){
//如果是正在加载中或没有更多数据了,则返回
if(this.state.showFoot != ){
return ;
}
//如果当前页大于或等于总页数,那就是到最后一页了,返回
if((pageNo!=) && (pageNo>=totalPage)){
return;
} else {
pageNo++;
}
//底部显示正在加载更多数据
this.setState({showFoot:});
//获取数据
this.fetchData( pageNo );
}
} const styles = StyleSheet.create({
container: {
flex: ,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
itemBox: {
flex:,
flexDirection:'row',
paddingTop:,
paddingBottom:,
paddingLeft:,
paddingRight:,
},
leftArea: {
flex:,
justifyContent: 'center',
alignItems: 'center',
},
avatar: {
width:,
height:,
},
rightArea: {
flex:,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: ,
color: 'blue',
},
desc: {
fontSize: ,
color: 'black',
}, }); module.exports = Home;

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10823970.html

转载请著名出处!谢谢~~