JS开发get请求上拉下拉 显示列表！！！！

首先是获取数据  设置上拉下拉跳转显示数据：

import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import { withNavigation } from "react-navigation";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import { getData } from "../comm/fetch";
import Item from "./Item";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], //列表数据
      refershState: RefreshState.Idle, //默认刷新状态隐藏
      page: 1, //默认显示第一页
      tab: props.tab, //默认显示精华页面
      limit: 10 //每页显示10条数据
    };
  }

  requestData = async () => {
    //请求后台数据
    let obj = {
      page: this.state.page,
      tab: this.state.tab,
      limit: this.state.limit
    }; //从状态里面取发送给后台的参数
    let data = await getData("/topics", obj);

    // let url = 'https://cnodejs.org/api/v1/topics'
    // url = url + '?tab=' + this.state.tab + '&page=' + this.state.page + '&limit=' + this.state.limit
    // let data = await fetch(url, {method: 'GET'})

    return data.data;
  };

  requestFirstData = () => {
    try {
      this.setState(
        {
          refershState: RefreshState.HeaderRefreshing, //请求数据前显示下拉刷新组件
          page: 1 //页面重置为第一页
        },
        async () => {
          let data = await this.requestData();
          this.setState({
            data: data,
            refershState: RefreshState.Idle //请求完数组之后隐藏下拉刷新组件
          });
        }
      );
    } catch (err) {
      this.setState({
        refershState: RefreshState.Failure //请求错误显示刷新失败组件
      });
    }
  };

  requestNextData = () => {
    try {
      this.setState(
        {
          refershState: RefreshState.FooterRefreshing, //请求数据前显示加载更多组件
          page: this.state.page + 1 //显示下一页
        },
        async () => {
          let data = await this.requestData();
          this.setState({
            data: [...this.state.data, ...data], //合并以前的数据
            refershState:
              this.state.data.length > 30
                ? RefreshState.NoMoreData
                : RefreshState.Idle //请求完数组之后隐藏加载更多组件
          });
        }
      );
    } catch (err) {
      this.setState({
        refershState: RefreshState.Failure //请求错误显示加载失败组件
      });
    }
  };

  componentDidMount() {
    this.requestFirstData();
  }

  headerRefresh = () => {
    this.requestFirstData();
  };

  footerRefresh = () => {
    this.requestNextData();
  };

  renderItem = rowData => {
    //渲染一项列表
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate("Detail", {
            //跳转到详情页，传递id和标题过去
            id: rowData.item.id,
            title: rowData.item.title
          })
        }
      >
        <Item item={rowData.item} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <RefreshListView
        data={this.state.data}
        keyExtractor={item => item.id}
        renderItem={this.renderItem}
        refreshState={this.state.refershState}
        onHeaderRefresh={this.headerRefresh}
        onFooterRefresh={this.footerRefresh}
      />
    );
  }
}

export default withNavigation(List);

显示列表及html的页面显示:

import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import timeago from "timeago.js";

export default class App extends Component {
  render() {
    const timeagoInstance = timeago(); //格式日期
    return (
      <View style={styles.box}>
        <Text style={styles.title}>{this.props.item.title}</Text>
        <View style={styles.container}>
          <View style={styles.left}>
            <Image
              style={styles.avatar}
              source={{ uri: this.props.item.author.avatar_url }}
            />
            <View>
              <Text>{this.props.item.author.loginname}</Text>
              <Text>
                {timeagoInstance.format(this.props.item.create_at, "zh_CN")}
              </Text>
            </View>
          </View>
          <View>
            <Text>
              阅读量：
              {this.props.item.visit_count}
            </Text>
            <Text>
              回复量：
              {this.props.item.reply_count}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: "#ddd"
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 5
  },
  left: {
    flexDirection: "row",
    alignItems: "center"
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 10
  },
  title: {
    fontWeight: "bold"
  }
});