每一个页面的List

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view"; // 上拉加载下拉刷新依赖
import { withNavigation } from "react-navigation";
import Item from "./Item";
class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshState: RefreshState.Idle, // 默认刷新状态隐藏
      tab: this.props.tab,
      limit: 15, // 一次最多显示15个
      page: 1, // 第一页
      datas: [] // 数据源
    };
  }
  requestData = async () => {
    // 异步请求字符串
    let response = await fetch(
      "https://cnodejs.org/api/v1/topics?tab=" +
        this.state.tab +
        "&page=" +
        this.state.page +
        "&limit=" +
        this.state.limit
    );
    // let url = "https://cnodejs.org/api/v1/topics";
//     url =
//       url +
//       "?tab=" +
//       this.state.tab +
//       "&page=" +
//       this.state.page +
//       "&limit=" +
//       this.state.limit;
//     // console.error(url);
//     let data = await fetch(url, { method: "GET" });
//     let json = await data.json();
    let responsejson = await response.json(); // 请求出来的结果
    return responsejson.data;
  };
  requestfistData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.HeaderRefreshing, // 刷新头部
          page: 1 // 将页面设置成第一页
        },
        async () => {
          let data = await this.requestData();
          this.setState({
            datas: data, // 请求数据
            refreshState: RefreshState.Idle // 隐藏刷新
          });
          // console.error(JSON.stringify(data));
        }
      );
    } catch (error) {
      this.setState({
        refreshState: RefreshState.Failure
      });
    }
  };
  requestNextData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.FooterRefreshing, // 刷新底部
          page: this.state.page + 1 // 刷新底部时，将页面设置成下一页
        },
        async () => {
          let data = await this.requestData();
          this.setState({
            datas: [...this.state.datas, ...data], // 刷新过后，将下一页的数据和上面的数据进行合并
            refreshState:
              this.state.datas.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 (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate("Detail", {
            id: rowData.item.id,
            title: rowData.item.title,
            content: rowData.item.content
          })
        }
      >
        <Item item={rowData.item} />
      </TouchableOpacity>
    );
  };
  render() {
    return (
      <RefreshListView
        data={this.state.datas}
        keyExtractor={item => item.id}
        renderItem={this.renderItem}
        refreshState={this.state.refreshState}
        onHeaderRefresh={this.headerRefresh}
        onFooterRefresh={this.footerRefresh}
      />
    );
  }
}
export default withNavigation(List);