react native学习笔记13——FlatList上拉加载
发布时间：2020-12-15 06:43:57 所属栏目：百科 来源：网络整理
导读：我们可以利用官方组件 RefreshControl 实现下拉刷新功能，但React Native官方没有提供相应的上拉加载的组件，因此在RN中实现上拉加载比下拉刷新要复杂一点。 虽然没有直接提供上拉加载的组件，不过我们仍可以通过FlatList的 onEndReached 与 onEndReachedThr
|
我们可以利用官方组件 ActivityIndicator这里上拉加载的转圈效果用ActivityIndicator表现。在开始上拉加载的实现之前先介绍一下官方组件ActivityIndicator——加载指示器。 <ActivityIndicator
animating={true}
color='red'
size="large"
/>
属性
加载页根据上述ActivityIndicator属性的介绍，可以使用ActivityIndicator实现一个简单的加载页面: import React,{Component} from "react";
import {ActivityIndicator,StyleSheet,View} from "react-native";
export default class ActivityIndicatorDemo extends Component {
render() {
return (
<View style={styles.container}> <ActivityIndicator animating={true} color='red' size="large" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},});
其效果如下： 上拉加载的实现下面进入正篇——上拉加载的实现 思路当FlatList滑动到底部时，页面数加一，触发请求新一页的网络数据，更新到组件state中的数据源dataArray中，dataArray也作为FlatList的数据源data。实现滑动到底部触发网络请求通过FlatList的onEndReached和onEndReachedThreshold属性，onEndReached是在当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。 具体实现全局变量 const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = 1;//当前第几页
let totalPage=5;//总的页数
let itemNo=0;//item的个数
初始化state constructor(props) {
super(props);
this.state = {
isLoading: true,//网络请求状态
error: false,errorInfo: "",dataArray: [],showFoot:0,// 控制foot， 0：隐藏footer 1：已加载完成,没有更多数据 2 ：显示加载中
isRefreshing:false,//下拉控制
}
}
网络请求——获取第n页数据 //网络请求——获取第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 = 0;
if(pageNo>=totalPage){
foot = 1;//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 );
}
渲染组件 render() {
//第一次加载等待的view
if (this.state.isLoading && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
//请求失败view
return this.renderErrorView();
}
//加载数据
return this.renderData();
}
加载等待页 renderLoadingView() {
return (
<View style={styles.container}> <ActivityIndicator animating={true} color='red' size="large" /> </View> ); }
加载网络请求失败页 renderErrorView() {
return (
<View style={styles.container}> <Text> Fail </Text> </View> ); }
加载数据显示页 renderData() {
return (
<FlatList data={this.state.dataArray} renderItem={this._renderItemView} ListFooterComponent={this._renderFooter.bind(this)} onEndReached={this._onEndReached.bind(this)} onEndReachedThreshold={1} ItemSeparatorComponent={this._separator} /> ); }
每个item组件渲染 //返回itemView
_renderItemView({item}) {
return (
<View> <Text style={styles.title}>name: {item.value.name} ({item.value.stargazers_count} stars)</Text> <Text style={styles.content}>description: {item.value.description}</Text> </View> ); }
尾部组件的渲染 _renderFooter(){
if (this.state.showFoot === 1) {
return (
<View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}> <Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}> 没有更多数据了 </Text> </View> ); } else if(this.state.showFoot === 2) { return ( <View style={styles.footer}> <ActivityIndicator /> <Text>正在加载更多数据...</Text> </View> ); } else if(this.state.showFoot === 0){ return ( <View style={styles.footer}> <Text></Text> </View> ); } }
上拉加载 _onEndReached(){
//如果是正在加载中或没有更多数据了，则返回
if(this.state.showFoot != 0 ){
return ;
}
//如果当前页大于或等于总页数，那就是到最后一页了，返回
if((pageNo!=1) && (pageNo>=totalPage)){
return;
} else {
pageNo++;
}
//底部显示正在加载更多数据
this.setState({showFoot:2});
//获取数据
this.fetchData( pageNo );
}
}
分隔线 _separator(){
return <View style={{height:1,backgroundColor:'#999999'}}/>;
}
效果图如下： 最后附上完整代码： import React,FlatList,Text,View} from "react-native";
const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = 1;//当前第几页
let totalPage=5;//总的页数
let itemNo=0;//item的个数
export default class LoadMoreDemo extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,//下拉控制
}
}
//网络请求——获取第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,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> <Text style={styles.title}>name: {item.value.name}</Text> <Text style={styles.content}>stars: {item.value.stargazers_count}</Text> <Text style={styles.content}>description: {item.value.description}</Text> </View> ); } renderData() { return ( <FlatList data={this.state.dataArray} renderItem={this._renderItemView} ListFooterComponent={this._renderFooter.bind(this)} onEndReached={this._onEndReached.bind(this)} onEndReachedThreshold={1} ItemSeparatorComponent={this._separator} /> ); } render() { //第一次加载等待的view if (this.state.isLoading && !this.state.error) { return this.renderLoadingView(); } else if (this.state.error) { //请求失败view return this.renderErrorView(); } //加载数据 return this.renderData(); } _separator(){ return <View style={{height:1,backgroundColor:'#999999'}}/>;
}
_renderFooter(){
if (this.state.showFoot === 1) {
return (
<View style={{height:30,}}> 没有更多数据了 </Text> </View> ); } else if(this.state.showFoot === 2) { return ( <View style={styles.footer}> <ActivityIndicator /> <Text>正在加载更多数据...</Text> </View> ); } else if(this.state.showFoot === 0){ return ( <View style={styles.footer}> <Text></Text> </View> ); } } _onEndReached(){ //如果是正在加载中或没有更多数据了，则返回 if(this.state.showFoot != 0 ){ return ; } //如果当前页大于或等于总页数，那就是到最后一页了，返回 if((pageNo!=1) && (pageNo>=totalPage)){ return; } else { pageNo++; } //底部显示正在加载更多数据 this.setState({showFoot:2}); //获取数据 this.fetchData( pageNo ); } } const styles = StyleSheet.create({ container: { flex: 1,title: { fontSize: 15,color: 'blue',footer:{ flexDirection:'row',height:24,justifyContent:'center',marginBottom:10,content: { fontSize: 15,color: 'black',} });
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |