React-native 三方框架实现上拉刷新、下拉加载网络请求以及跳转先详情页面
首先 第一步 需要导入三方的类库 和跳转详情页面
yarn add react-native-refresh-list-view
//导包
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
import React, { Component } from “react”;
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight
} from “react-native”;
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
class Good extends Component {
constructor(props) {
super(props);
/**
*page： 当前页面值
refreshState： 刷新状态
dataValue： 数据源
*/
this.state = {
page: 1,
refreshState: RefreshState.Idle,
dataValue: []
};
}
/**
- 生命周期方法，创建的时候调用下拉刷新，加载数据
*/
componentDidMount() {
this.onHeaderRefresh();
}
//下拉刷新
onHeaderRefresh = () => {
//设置为正在下拉刷新的状态
this.setState({ page: 1, refreshState: RefreshState.HeaderRefreshing });
fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10`)
.then(response => response.json())
.then(responseJson => {
this.setState({
//显示获取到的数据
dataValue: responseJson.data,
refreshState: RefreshState.Idle,
page: this.state.page + 1
});
})
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
});
};
//上拉加载
onFooterRefresh = () => {
//设置为正在上拉加载的状态
this.setState({ refreshState: RefreshState.FooterRefreshing });
fetch(
`https://cnodejs.org/api/v1/topics?page=${
this.state.page
}&tab=good&limit=10`
)
.then(response => response.json())
.then(responseJson => {
this.setState({
//将加载到的数据与原数据进行拼接
dataValue: [...this.state.dataValue, ...responseJson.data],
refreshState: RefreshState.Idle,
page: this.state.page + 1
});
})
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
});
};
render() {
return (
{/* //刷新控件的使用 */}
<RefreshListView
style={{ flex: 1 }}
data={this.state.dataValue}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate(“Details”, {
content: item.content
});
}}
>
<View style={{ flexDirection: “row”, margin: 5 }}>
<Image
source={{ uri: item.author.avatar_url }}
style={{ width: 80, height: 80, borderRadius: 65 }}
/>
)}
//多出方法：设置刷新状态，设置下拉刷新，设置上拉加载更多
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: “center”,
alignItems: “center”,
backgroundColor: “#F5FCFF”
},
welcome: {
fontSize: 20,
textAlign: “center”,
margin: 10
}
});
export default Good;
跳转详情页面 ：
import React, { Component } from “react”;
import { StyleSheet, ScrollView, View, WebView } from “react-native”;
import HTML from “react-native-render-html”;
import { withNavigation } from “react-navigation”;
class Details extends Component {
render() {
return (
<HTML
style={styles.welcome}
html={this.props.navigation.getParam(“content”, “content”)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: “center”,
alignItems: “center”,
backgroundColor: “#F5FCFF”
},
welcome: {
fontSize: 20,
textAlign: “center”,
margin: 10,
flex: 1
}
});
export default withNavigation(Details);