2018-12-14

import React from "react";

import { Text, View, Image } from "react-native";

import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

export default class FetchExample extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      dataValue: [], //数据源

      RefreshState: RefreshState.Idle, //静止状态

      page: 1

    };

  }

  componentDidMount() {

    this.onHeaderRefresh();

  }

  onHeaderRefresh = () => {

    //更新状态，下拉刷新

    this.setState({

      refreshState: RefreshState.HeaderRefreshing,

      page: 1

    });

    //网络请求

    fetch(

      `https://cnodejs.org/api/v1/topics?page=${

        this.state.page

      }&tab=good&limit=10`

    )

      .then(response => response.json())

      .then(responseJson => {

        this.setState({

          dataValue: responseJson.data,

          refreshState: RefreshState.Idle,

          page: this.state.page

        });

      })

      .catch(error => {

        this.setState({

          refreshState: RefreshState.Failure

        });

        console.warn(error);

      });

  };

  //上拉加载更多

  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

        });

        console.warn(error);

      });

  };

  render() {

    return (

     

       

          data={this.state.dataValue}

          keyExtractor={(item, index) => item.id}

          renderItem={({ item }) => (

           

              style={{

                borderColor: "red",

                borderBottomWidth: 1,

                padding: 10

              }}

            >

             

                style={{ width: 80, height: 80, borderRadius: 40 }}

                source={{ uri: item.author.avatar_url }}

              />

             

                onPress={() =>

                  this.props.navigation.navigate("Xiang", {

                    abc: item.content

                  })

                }

              >

                {item.title}

             

           

          )}

          refreshState={this.state.refreshState}

          onHeaderRefresh={this.onHeaderRefresh}

          onFooterRefresh={this.onFooterRefresh}

        />

     

    );

  }

}