上下拉刷新网络数据
程序员文章站
2022-07-16 14:42:18
...
上下拉刷新网络数据
创建share.js
import React, { Component } from "react";import { StyleSheet, Text, View, Image, TouchableHighlight} from "react-native";import RefreshListView, { RefreshState } from "react-native-refresh-list-view";//yarn add react-native-refresh-list-view
class Share 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=ask&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=ask&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 ( <View style={styles.container}> {/* //刷新控件的使用 */} <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 }} /> <View> <Text>{item.title}</Text> <Text>{item.author.loginname}</Text> </View> </View> </TouchableHighlight> )} //多出方法：设置刷新状态，设置下拉刷新，设置上拉加载更多 refreshState={this.state.refreshState} onHeaderRefresh={this.onHeaderRefresh} onFooterRefresh={this.onFooterRefresh} /> </View> ); }}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#F5FCFF" }, welcome: { fontSize: 20, textAlign: "center", margin: 10 }});
export default Share;
创建details.js
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";//yarn add react-native-refresh-list-viewclass Details extends Component { render() { return ( <View style={styles.container}> <ScrollView> <HTML style={styles.welcome} html={this.props.navigation.getParam("content", "content")} /> </ScrollView> </View> ); }}
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);