RN -RefreshListView下拉刷新上啦加载

import React, { Component } from "react";

import { Text, TouchableOpacity } from "react-native";

import RefreshListView, { RefreshState } from "react-native-refresh-list-view"; //把RefreshListView导进来

import { getData } from "./frech";

import { withNavigation } from "react-navigation";

import Ye from "./Ye";

import Xiang from "./Xiang";

class List extends Component {

constructor(props) {

super(props);

this.state = {

tab: props.tab,

data: [],

refreshState: RefreshState.Idle,

page: 1,

limit: 15

};

}

 

request2Data = async () => {

let response = await fetch(

//拼接字符串

"https://cnodejs.org/api/v1/topics?tab=" +

this.state.tab +

"&page=" +

this.state.page +

"&limit=" +

this.state.limit

);

let responsejson = await response.json();

// console.error(responsejson);

return responsejson.data; // 把网络请求到的数据返回出去用于调用

};

 

// requestData = async () => {

// let obj = {

// page: this.state.page,

// tab: this.state.tab,

// limit: this.state.limit

// };

// let data = await getData("/topics", obj);

// return data.data;

// };

requestfistData = () => {

//下拉刷新方法

try {

this.setState(

{

refreshState: RefreshState.HeaderRefreshing, //设置RefreshListView刷新状态：下拉

page: 1 //把页数设置为1 用与第一次请求网络数据或刷新数据

},

async () => {

let data = await this.request2Data(); //定义一个变量用于接收request2Data（）返回的数据

this.setState({

data: data, //把数据设置给全居使用

refreshState: RefreshState.Idle //设置RefreshListView刷新状态：刷新完毕

});

// console.error(JSON.stringify(data));

}

);

} catch (error) {

this,

this.setState({

refreshState: RefreshState.Failure //设置RefreshListView刷新状态：刷新

});

}

};

requestNextData = () => {

//上拉加载方法

try {

this.setState(

{

refreshState: RefreshState.FooterRefreshing, //设置RefreshListView刷新状态：上啦

page: this.state.page + 1 //每次调用此方法页数加1

},

async () => {

let data = await this.request2Data(); //定义一个变量用于接收request2Data（）返回的数据

this.setState({

data: [...this.state.data, ...data], //使用扩展运算符来把两段数据合二为一

//用于判断最大可以刷新几页

refreshState:

this.state.data.length > 30

? RefreshState.NoMoreData

: RefreshState.Idle

});

}

);

} catch (error) {

this.setState({

refreshState: RefreshState.Failure

});

}

};

componentDidMount() {

//生命周期方法渲染开时调用

this.requestfistData();

}

headerRefresh = () => {

//下拉刷新时调用，再这由于下拉刷新和首次加载所请求的都是第一页数据所以调用同一个方法

this.requestfistData();

};

footerRefresh = () => {

//上拉加载时调用

this.requestNextData();

};

renderItem = rowData => {

return (

onPress={() =>

this.props.navigation.navigate("Xiang", {

id: rowData.item.id,

title: rowData.item.title,

content: rowData.item.content

})

}

>

);

};

render() {

return (

data={this.state.data} //设置数据

keyExtractor={item => item.id} // 设置每条数据的标识

renderItem={this.renderItem} ////用于展示数据

refreshState={this.state.refreshState} //设置刷新状态

onHeaderRefresh={this.headerRefresh} //设置下拉时调用那个方法

onFooterRefresh={this.footerRefresh} //设置上拉时调用那个方法

/>

);

}

}

export default withNavigation(List);

下面是ye里的 Ye里的代码主要是用于数据展示布局的

export default class Ye extends Component {

render() {

return (

style={style.img}

source={{ uri: this.props.item.author.avatar_url }}

/>

{this.props.item.title}

{this.props.item.last_reply_at}

);

}

}

,

{

navigationOptions: ({ navigation }) => ({

tabBarIcon: ({ focused, tintColor }) => {

const { routeName } = navigation.state;

let iconName;

if (routeName === "A") {

iconName = "ios-document";

} else if (routeName === "B") {

iconName = "ios-create";

} else if (routeName === "C") {

iconName = "ios-person";

} else if (routeName === "D") {

iconName = "ios-images";

}

return ;

}

})

}