欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

上下拉刷新网络数据

程序员文章站 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);

相关标签: rn